我如何在使用 <canvas> 标签

Question

我试图使它在画布的中间，在一个列中有三个圆圈，但是我很难为其做一个循环。 （注意：我不想编写三个单独的弧，而只编写一个循环）。 任何帮助将不胜感激。

<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

我认为您的弧线是在画布外部绘制的。

该脚本在列中绘制了三个圆圈：

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