在使用 html canvas 和 javascript 绘制塞舌尔国旗后，我正在尝试使用数组或循环来简化我的代码

Question

我正在使用 html canvas 和 javascript 创建塞舌尔国旗，以根据需要使用数组和循环创建网页。到目前为止，我已经能够绘制标志，但现在我想在我的代码中添加数组和循环逻辑

<html>
<head>
    <title>Canvas</title>
</head> 
<body>
    <canvas id="flag" width="550" height="300" style="border:1px solid grey" >
        Your browser does not support HTML5.
    </canvas>
    <script>
    window.onload = function(){
        var canvas = document.getElementById("flag")
            c = canvas.getContext("2d")


        c.beginPath();
        c.moveTo(0,300);
        c.lineTo(120,0);
        c.lineTo(0,0);
        c.closePath();
        c.stroke();
        c.fillStyle="#003f87";
        c.fill();

        c.beginPath();
        c.moveTo(0,300);
        c.lineTo(350,0);
        c.lineTo(120,0);
        c.closePath();
        c.stroke();
        c.fillStyle="#fcd856";
        c.fill();

        c.beginPath();
        c.moveTo(0,300);
        c.lineTo(550,80);
        c.lineTo(550,0);
        c.lineTo(350,0);
        c.closePath();
        c.stroke();
        c.fillStyle="#d62828";
        c.fill();


        c.beginPath();
        c.moveTo(0,300);
        c.lineTo(550,200);
        c.lineTo(550,80);
        c.closePath();
        c.stroke();

        c.beginPath();
        c.moveTo(0,300);
        c.lineTo(550,300);
        c.lineTo(550,200);
        c.closePath();
        c.stroke();
        c.fillStyle="#007a3d";
        c.fill();
    }
    </script>


</body>

Answer 1

下面是一个使用节数组的示例，每个节包含一个点数组。我还使用数组来表示点，但您可以选择使用 {x: 123, y: 456} 之类的对象。

有两个嵌套循环，一个用于部分，一个用于点。

你特别要求循环，所以我在这里使用了for循环。您可能还想考虑 Array.forEach 遍历数组。

var sections = [{
  points: [[0,300], [120,0], [0,0]],
  color: "#003f87"
},{
  points: [[0,300], [350,0], [120,0]],
  color: "#fcd856"
},{
  points: [[0,300], [550,80], [550,0], [350,0]],
  color: "#d62828"
},{
  points: [[0,300], [550,200], [550,80]],
  color: "#ffffff"
},{
  points: [[0,300], [550,300], [550,200]],
  color: "#007a3d"
}];

window.onload = function(){
  var canvas = document.getElementById("flag");
  var c = canvas.getContext("2d");
  var i, j, section, point;

  for (i = 0; i < sections.length; i++) {
    section = sections[i];
    c.beginPath();
    point = section.points[0];
    c.moveTo(point[0], point[1]);
    for (j = 1 ; j < section.points.length; j++) {
      point = section.points[j];
      c.lineTo(point[0], point[1]);
    }
    c.closePath();
    c.stroke();
    c.fillStyle = section.color;
    c.fill();
  }
}

<canvas id="flag" width="550" height="300" style="border:1px solid grey" >
  Your browser does not support HTML5.
</canvas>

Answer 2

这是我的看法。它循环遍历每段边缘上的点：

function drawTriangle(c, firstPoint, secondPoint, color) {
  var origin = [0, 300];
  c.beginPath();
  c.moveTo.apply(c, origin);
  c.lineTo.apply(c, firstPoint);
  c.lineTo.apply(c, secondPoint);
  c.closePath();
  c.strokeStyle = color;
  c.stroke();
  c.fillStyle = color;
  c.fill();
}

var c = document.getElementById("flag").getContext("2d");
var pointsOnEdges = [
    [0, 0],
    [120, 0],
    [350, 0],
    [550, 0],
    [550, 80],
    [550, 200],
    [550, 300],
    [550, 550]
  ];
var colors = ["#003f87", "#fcd856", "#d62828", "#d62828", "#fff", "#007a3d"];

for (var i = 0; i < colors.length; i++) {
  drawTriangle(c, pointsOnEdges[i], pointsOnEdges[i + 1], colors[i]);
}

<canvas id="flag" width="550" height="300" style="border:1px solid grey">
  Your browser does not support HTML5.
</canvas>

Answer 3

对于这张图，我认为最简单的方法是在将上下文矩阵移动到左下角后使用ctx.rotate()，然后只在重新旋转上下文之前画一条垂直线：

var c = canvas.getContext('2d');

var shapes = [['#003f87', 21.6],
              ['#fcd856', 27.7], 
              ['#d62828', 19], 
              ['#fff', 11.2],
              ['#007a3d', 11]
             ];

var y = canvas.height;

c.translate(0,y); // first move our context to the bottom-left corner

for(var i=0; i<shapes.length; i++) // loop through our shapes array
    draw(shapes[i][0], shapes[i][1]);

function draw(color, deg){
  c.fillStyle= color;
  c.beginPath();
  c.moveTo(0,-3*y);  // move to the last point we drawn
  c.lineTo(0,0);   // go back to the bottom-left corner (now at 0,0)
  c.rotate(deg*(Math.PI/180))   // rotate the context by x degrees
  c.lineTo(0, -3*y);  // trace a vertical line outside our canvas
  c.stroke();
  c.fill();
}

<canvas id="canvas" width="550" height="300"></canvas>

在使用 html canvas 和 javascript 绘制塞舌尔国旗后，我正在尝试使用数组或循环来简化我的代码

am trying to use arrays or loops to simplify my code after drawing Seychelles flag with html canvas and javascript

javascript

html5-canvas