如何在使用<画布>标签

How can I draw a loop while using the <canvas> tag

本文关键字：画布 gt 标签 lt      更新时间：2023-11-08

我正在努力使它在画布的中间，一列中有三个圆，但我在为它创建循环时遇到了困难。（注意：我不想编写三个单独的弧，只想编写一个循环）。如有任何帮助，我们将不胜感激。

<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>

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

这个脚本在一列中画三个圆圈：

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();
}
相关文章：