HTML5 画布：带有 for 循环的多个弧形答案

【问题标题】：HTML5 canvas: Mutliple arc shapes with for loopHTML5 画布：带有 for 循环的多个弧形
【发布时间】：2019-02-09 03:32:39
【问题描述】：

您好，我对下面代码的问题是弧正在创建 1 个形状，而不是 for 循环中指定的十个形状...

如果我要从 arc 更改为 $cd.fillRect(10,20,$x,$y);，那么这将创建 10 个不同的矩形，但不会创建 arc...我在这里误解了什么？

 
var $canvas = $('#canvas-one')[0],
    $cd;

if ($canvas.getContext) {

$cd = $canvas.getContext('2d');

for (i = 0; i <= 10; i++) {

    $cd.fillStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";

    $cd.strokeStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";

    var $x = 300 + Math.floor(Math.random() * 101);
    var $y = 300 + Math.floor(Math.random() * 101);
    var $radius = 0.1 + Math.floor(Math.random() * 6);

    $cd.beginPath();

    $cd.arc($x, $y, $radius, 0, Math.PI * 2, true);

}

$cd.stroke();
$cd.fill();

//$canvas.width = $canvas.height;


}

【问题讨论】：

标签： javascript html canvas for-loop geometric-arc

【解决方案1】：

描边和填充应该在循环中

【讨论】：

【解决方案2】：

我想你忘了将x 与i 相乘。

for (let i = 0; i < 10; i++) {
    context.fillStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
    context.beginPath();
    context.arc(i * x, y,15, 0, 2 * Math.PI,true);
    context.fill();

【讨论】：