<canvas>タグを使ってループを描くにはどうすればいいですか

Question

私はキャンバスの真ん中に3つの円があるようにしようとしていますが、ループを作るのに問題があります。 （注：私は3つの別々の弧をコードしたくない、ループのみ）。どんな助けでも大歓迎です。

<canvas id="menu" width="38%" height="38%" style="border: 1px solid black"> </canvas> 

<script> 
    var contents = document.getElementById("menu"); 
    var ctx = contents.getContext("2d"); 
    ctx.fillStyle = "#FFF0F5"; //sets the fill color 
    ctx.fillRect(0, 0, 38, 38); //draws the rectangle 
    ctx.fillStyle = "#00FFFF"; 
    for(var i = 25; i < 100; i = i + 20) { 
    ctx.beginPath(); 
    ctx.arc(20, i, 2, 0, 2*Math.PI); 
    ctx.stroke(); 
    } 
    </script> 

Answer 1

あなたのアークがキャンバスの外側に描かれていたと思います。

このスクリプトは、列に3つの円を描画します。

var contents = document.getElementById("menu"); 
var ctx = contents.getContext("2d"); 
ctx.fillStyle = "#FFF0F5"; //sets the fill color 
ctx.fillRect(0, 0, 38, 38); //draws the rectangle 
ctx.fillStyle = "#00FFFF"; 
for(var i = 1; i < 4; i++) { 
    ctx.beginPath(); 
    ctx.arc(19, i * 10, 2, 0, 2*Math.PI); 
    ctx.stroke(); 
}