画布的绘制线条

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坐标绘制了2条线，相隔40个像素。 这些步骤可以放入循环中。