畫布的繪制線條

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個像素。 這些步驟可以放入循環中。