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

【问题标题】：how to make a row of triangles using loops?如何使用循环制作一排三角形？
【发布时间】：2022-01-04 22:16:24
【问题描述】：

如何制作一排三角形？

这是我目前的代码。

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

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>

【问题讨论】：

确保在整个画布中使用相同的变量名。

标签： javascript loops html5-canvas

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

此外，我强烈建议使用您设置的变量名称 (coolCanvas) 作为对画布的引用，或者将此变量设置为命名为 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>

【讨论】：