如何使用JavaScript循环在Canvas中绘制一排三角形

• 原代码存在两处问题：
  1. 变量引用错误：获取canvas节点赋值给coolCanvas变量后，后续调用getContext时误用了未声明的canvas变量，运行会报错
  2. 三角形坐标固定：循环内所有三角形的顶点坐标均为常量，5个三角形完全重叠，无法呈现一排的效果
• 修复方案：
  1. 修正变量名，保持引用一致
  2. 基于循环变量i计算每个三角形的水平偏移量，所有顶点的x坐标叠加该偏移量，实现三角形依次向右排列

修改后完整代码如下：

function showDrawing() {
  // 修正变量名，保持引用一致
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 5;
  // 可自定义三角形数量和单个三角形的水平占宽
  const triangleCount = 5;
  const triangleWidth = 180;
  for (let i = 0; i < triangleCount; i += 1) {
    // 计算当前三角形的水平偏移量
    const offset = i * triangleWidth;
    ctx.beginPath();
    // 所有x坐标叠加偏移量
    ctx.moveTo(126 + offset, 300);
    ctx.lineTo(200 + offset, 400);
    ctx.lineTo(50 + offset, 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>

如果需要调整三角形的数量或者间距，直接修改triangleCount（三角形个数）和triangleWidth（单个三角形的水平占宽，值越大间距越大）即可。

内容的提问来源于stack exchange，提问作者honey