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

如何在使用<canvas>标记时绘制循环

1 个答案: