如何使用循环制作一排三角形？

Question

如何制作一排三角形？

这是我目前的代码。

我是新来的，我不知道在这里做什么。

function showDrawing() {
  let coolCanvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 5;
  for (let i = 0; i < 5; i += 1) {
    ctx.beginPath();
    ctx.moveTo(126, 300);
    ctx.lineTo(200, 400);
    ctx.lineTo(50, 400);
    ctx.closePath();
    ctx.strokeStyle = 'blue';
    ctx.fillStyle = 'purple';
    ctx.fill();
    ctx.stroke();
  }
}

<canvas id="canvas" width="1500" height="700" style="border:3px solid #000000;">
</canvas>

<button onclick="showDrawing()">Drawing</button>

Answer 1

您应该使用变量添加到 X 位置并根据需要递增：

function showDrawing() {
    let coolCanvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    let delta = 0;
    ctx.lineWidth = 5;
    
    for (let i = 0; i < 5; i += 1) {
        ctx.beginPath();
        ctx.moveTo(126 + delta, 300); 
        ctx.lineTo(200 + delta, 400); 
        ctx.lineTo(50 + delta, 400);
        ctx.closePath();
        ctx.strokeStyle = 'blue';
        ctx.fillStyle = 'purple';
        ctx.fill();
        ctx.stroke();
        
        delta += 174;
    }
}

<canvas id="canvas" width="1500" height="700" style="border:3px solid #000000;">
</canvas>

<button onclick="showDrawing()">Drawing</button>

Answer 2

您可以使用迭代 (i) 并将其乘以您想要的间距并将其添加到 x 值。

function showDrawing() {
    let coolCanvas = document.getElementById("canvas");
    let ctx = coolCanvas.getContext("2d");
    ctx.lineWidth = 5;
    
    for (let i = 0; i < 5; i += 1) {
        ctx.beginPath();
        ctx.moveTo(126+(i*170), 300); 
        ctx.lineTo(200+(i*170), 400); 
        ctx.lineTo(50+(i*170), 400);
        ctx.closePath();
        ctx.strokeStyle = 'blue';
        ctx.fillStyle = 'purple';
        ctx.fill();
        ctx.stroke();
    }
}

<canvas id="canvas" width="1500" height="700" style="border:3px solid #000000;">
</canvas>

<button onclick="showDrawing()">Drawing</button>

Answer 3

您可以创建一个单独的函数来处理绘制三角形，然后传入 xStart 作为要绘制的任何三角形的基本 x 坐标值。然后在 showDrawing 函数中，运行循环并将 i 变量乘以某个间距值。在您的代码中，您的三角形宽度为 150 像素，从 x 值 50 开始，因此我将 i 值乘以 200 以确保解决方案代码中的一致性。

此外，我强烈建议使用您设置的变量名(coolCanvas)作为对canvas的引用或将此变量设置为canvas 代替。如果您只设置一次 canvas 并引用一次，您可以完全跳过设置引用：

let ctx = document.getElementById("canvas").getContext("2d");

function drawTriangle(ctx, xStart) {
  ctx.lineWidth = 5;
  ctx.strokeStyle = "blue";
  ctx.fillStyle = "purple";
  ctx.beginPath();
  ctx.moveTo(xStart + 126, 300);
  ctx.lineTo(xStart + 200, 400);
  ctx.lineTo(xStart + 50, 400);
  ctx.closePath();
  ctx.fill()
  ctx.stroke();
}

function showDrawing() {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 5;
  for (let i = 0; i < 5; i += 1) {
    drawTriangle(ctx, i * 200);
  }
}
document.getElementById("draw").addEventListener("click", showDrawing);

canvas {
  border: 3px solid #000000;
}

<div><button id="draw">Drawing</button></div>
<div><canvas id="canvas" width="1500" height="700"></canvas></div>

如何使用循环制作一排三角形？

how to make a row of triangles using loops?

javascript

loops

html5-canvas