画布画线

Question

我对这一切有点陌生，似乎无法弄清楚如何制作一个 for 循环（如果可能）来绘制我正在寻找的线条类型。我正在尝试使用画布创建南瓜的图像并想勾勒出牙齿的轮廓。我希望有一种更简单的方法，而不是输入所有代码来绘制勾勒牙齿所需的单独线条。这是每一行的代码，但我似乎无法弄清楚会做同样事情的 for 循环。任何帮助将不胜感激。谢谢。

context.beginPath();
context.strokeStyle = '#cc5200';
context.moveTo(220, 590);
context.lineTo(220, 550);
context.moveTo(220, 550);
context.lineTo(260, 550);
context.moveTo(260, 550);
context.lineTo(260, 590);
context.moveTo(260, 590);
context.lineTo(300, 590);
context.moveTo(300, 590);
context.lineTo(300, 550);
context.moveTo(300, 550);
context.lineTo(340, 550);
context.moveTo(340, 550);
context.lineTo(340, 590);
context.moveTo(340, 590);
context.lineTo(380, 590);
context.moveTo(380, 590);
context.lineTo(380, 550);
context.moveTo(380, 550);
context.lineTo(420, 550);
context.moveTo(420, 550);
context.lineTo(420, 590);
context.moveTo(420, 590);
context.lineTo(460, 590);
context.moveTo(460, 590);
context.lineTo(460, 550);
context.moveTo(460, 550);
context.lineTo(500, 550);
context.moveTo(500, 550);
context.lineTo(500, 590);
context.moveTo(500, 590);
context.lineTo(540, 590);
context.moveTo(540, 590);
context.lineTo(540, 550);
context.moveTo(540, 550);
context.lineTo(580, 550);
context.lineTo(580, 590);

context.stroke();

Answer 1

这应该是一个开始：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.beginPath();
context.strokeStyle = '#cc5200';

// Example line that is repeated in the loop
context.moveTo(10, 90);      // Bottom left
context.lineTo(10, 50);      // Up
context.lineTo(10 + 40, 50); // Right
context.lineTo(10 + 40, 90); // Down
context.lineTo(10 + 80, 90); // Right

context.moveTo(220, 90);
for (var i = 220; i <= 540; i += 80) {
  context.lineTo(i, 90);
  context.lineTo(i, 50);
  context.lineTo(i + 40, 50);
  context.lineTo(i + 40, 90);
  if(i != 540) // Don't draw the line for the last one
    context.lineTo(i + 80, 90);
}


context.stroke();

<canvas id="canvas" width="600" height="600"></canvas>

除了580 的x 值之外，您似乎为每个x 坐标绘制了两条线，相距40 像素。可以将这些步骤放入一个循环中。