jshw2

标签：200 300 ctx color step jshw2 now

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.lineJoin = "round"
ctx.lineCap = "round"

function goto(step, now) {
  ctx.beginPath();
  ctx.moveTo(now[0], now[1]);
  ctx.lineTo(step[0], step[1]);
  ctx.strokeStyle="black";
  ctx.lineWidth = 1
  ctx.stroke();
}

function line(now, step, color) {
  ctx.beginPath();
  ctx.moveTo(now[0], now[1]);
  ctx.lineTo(step[0], step[1]);
  ctx.strokeStyle = color;
  ctx.lineWidth = 1
  ctx.stroke();
}
// 1
// 实现一个矩形函数
// x y 是矩形左上角坐标
// w h 是宽高
// rect(x, y, w, h)
function rect(x, y, w, h, color) {
  line([x, y], [x + w, y], color);
  line([x + w, y], [x + w, y + h], color);
  line([x + w, y + h], [x, y + h], color);
  line([x, y + h], [x, y], color);
}

// 2
// 实现一个矩形函数
// x y 是矩形中心的坐标
// w h 是宽高
// center_rect(x, y, w, h)
function center_rect(x, y, w, h, color) {
  x -= w / 2;
  y -= h / 2;
  line([x, y], [x + w, y], color);
  line([x + w, y], [x + w, y + h], color);
  line([x + w, y + h], [x, y + h], color);
  line([x, y + h], [x, y], color);
}

// 3
// 实现一个正五角星(国旗大星星那种)函数
// x y 是五角星顶部横边的左边点坐标
// length 是一条线的长度
// 这是一个正五角星
// vgwujcxy(x, y, length)
function vgwujcxy(x, y, length) {
  let angle = 144;
  let i = 0;
  now = [x , y];
  while (i < 5) {
    step = [now[0] + length * Math.cos((angle * i) * Math.PI / 180), now[1] + length * Math.sin((i * angle) * Math.PI / 180)];
    goto(step, now);
    now = step;
    i++;
  }
}


// 4
// 实现一个函数画日本国旗
// 调用 2 个函数画日本国旗
// 一个画背景的白色矩形
// 一个画中间的红色圆
// japan()
function polygon(x, y, n, l, color) {
  let angle = 180 - (n - 2) * 180 / n;
  let i = 0;
  now = [x , y];
  while (i < n) {
    step = [now[0] + l * Math.cos((angle * i) * Math.PI / 180), now[1] + l * Math.sin((i * angle) * Math.PI / 180)];
    gotoNew(step, now, color);
    now = step;
    i++;
  }
}

function circle(x, y, r, color) {
  polygon(x, y - r, 1000, r * 3.14 * 2 / 1000, color);
}

function gotoNew(step, now, color) {
  ctx.beginPath();
  ctx.moveTo(now[0], now[1]);
  ctx.lineTo(step[0], step[1]);
  ctx.strokeStyle = color;
  ctx.lineWidth = 1
  ctx.stroke();
}

function japan() {
  center_rect(300, 300, 300, 200, "black");
  let i = 50;
  while (i >= 1) {
    circle(300, 300, i, "red")
    i--;
  }
}

// 5
// 实现一个五角星函数
// x y 是五角星的中心点坐标
// length 是一条线的长度
// rorate 是正五角星顺时针偏移的角度
// wujcxy(x, y, length, rorate)
function wujcxy(x, y, length, rorate) {
  let angle = 144;
  let i = 0;
  now = [x, y];
  
  while (i < 5) {
    step = [now[0] + length * Math.cos((angle * i + rorate) * Math.PI / 180), now[1] + length * Math.sin((i * angle + rorate) * Math.PI / 180)];
    goto(step, now);
    now = step;
    i++;
  }
}

// 6
// 实现一个函数画中国国旗(以下国旗题目都是如此 不重复了)
// 调用 2 个函数画中国国旗
// 一个画红色背景
// 另一个画五角星（调用 5 次，不要求角度朝向，只要 5 个五角星即可）
// 当然你也可以使用第 5 题 wujcxy 这个函数画出完美的国旗
// 注意, 作业中提到的国旗的颜色我们只画线框部填色
// china()

function china() {
  center_rect(300, 300, 300, 200, "black");
  wujcxy(180, 250, 50, 0);
  wujcxy(240, 220, 20, 30);
  wujcxy(260, 230, 20, 30);
  wujcxy(260, 260, 20, 30);
  wujcxy(240, 280, 20, 30);

}

// 7
// 实现一个函数画法国国旗
// france()

function france() {
  center_rect(300, 300, 300, 200);
  line([250, 200], [250, 400], "blue")
  line([350, 200], [350, 400], "red")
}


// 8
// 画德国国旗
// germany()


function germany() {
  center_rect(300, 300, 300, 200);
  line([150, 270], [450, 270], "black")
  line([150, 340], [450, 340], "yellow")
}


// 9
// 画 冈比亚国旗
// gambia()
function gambia() {
  center_rect(200, 200, 300, 75, "red")
  center_rect(200, 262.5, 300, 50, "blue")
  center_rect(200, 325, 300, 75, "green")
}

// 10
// 画 瑞士国旗
// switzerland()
function lineNew(now, step, color, width) {
  ctx.beginPath();
  ctx.moveTo(now[0], now[1]);
  ctx.lineTo(step[0], step[1]);
  ctx.strokeStyle = color;
  ctx.lineWidth = width
  ctx.stroke();
}
function switzerland() {
  center_rect(200, 200, 300, 200, "red")
  lineNew([200, 150], [200, 250], "red", 30)
  lineNew([150, 200], [250, 200], "red", 30)
}

// 11
// 画朝鲜国旗
// 分别是 圆 矩形 五角星
// 提示, 使用之前定义的函数
// northkorea()
function northkorea() {
  rect(200, 200, 300, 200, "black");
  line([200, 230], [500, 230], "blue")
  circle(300, 300, 60,  "red")
  vgwujcxy(260, 290, 80)
  line([200, 370], [500, 370], "blue")
}

northkorea()

标签：200,300,ctx,color,step,jshw2,now
From： https://www.cnblogs.com/echoT/p/17011174.html