HTML5 canvas: Mutliple дугообразные формы с циклом for - PullRequest
Новая
       7

HTML5 canvas: Mutliple дугообразные формы с циклом for

0 голосов
/ 11 февраля 2011

Привет, моя проблема с кодом, приведенным ниже, заключается в том, что дуга создает 1 фигуру, а не десять, указанную в цикле for ...

Если бы мне пришлось перейти с дуги на $cd.fillRect(10,20,$x,$y);, то этосоздайте 10 разных прямоугольников, но не дуги ... что я здесь не так понимаю? 

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

<p>if ($canvas.getContext) {</p>

<pre><code>$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;

}

Ответы [ 2 ]

1 голос
/ 11 февраля 2011

ход и заливка должны быть в цикле

0 голосов
/ 08 февраля 2019

Я думаю, что вы забыли умножить 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();
...