为Canvas绘制线条

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();

- Brandy Kimmel

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>

< p >除了< code > 580 的< code > x 值，您似乎在每个< code > x 坐标上画了2条相距40像素的线。这些步骤可以放进一个循环中。< /p >

- Cerbrus

---

谢谢，但是这给了我锯齿状的线条而不是方形的线条。我找到了一个for循环，可以为整个画布绘制网格线，但似乎无法弄清如何修改它以仅绘制给定的线条而不得到锯齿状图案。 - Brandy Kimmel

@BrandyKimmel：我已经编辑了答案。lineTo(10行只是为了绘制重复模式的示例，可以将其删除。 :-) - Cerbrus

这就更像了，现在我只需要想办法把它全部下移就好了，哈哈。谢谢。 - Brandy Kimmel

@BrandyKimmel：其中的 50 和 90 是 y 坐标。将它们增加，线条就会向下移动。 - Cerbrus

我确实注意到了。非常感谢你的帮助。 - Brandy Kimmel