キャンバスの描画線

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

これは開始すべきである：580の

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>

x値はさておき、各x 40個の画素離れて、座標のための2線を描画するように見えます。これらのステップはループに入れられます。