在畫布中循環繪制圓

Question

所以我想畫一個圈，但是當我運行我的代碼時，我會得到這樣的東西：

它應該只在隨機位置繪制3個圓圈。 我的代碼是這樣的：

for (var i = 0; i < iloscU; i++) {
    ctx.strokeStyle = "black";
    var centreX = Math.random() * 1000;
    var centreY = Math.random() * 1000;
    var radius = 75;
    var startAngle = 0 * Math.PI / 180;
    var endAngle = 360 * Math.PI / 180;
    ctx.arc(centreX, centreY, radius, startAngle, endAngle, false);
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.stroke();
}

我知道這很愚蠢，但我不知道是什么:(

Answer 1

因為您仍然在同一條路徑上 ，所以畫布可以為您“排列”這些點。

要分開，每次要繪制形狀時都要開始一條新路徑，完成后將其關閉：

ctx.strokeStyle="black";
ctx.fillStyle="green";
var RADIUS=75;
var START_ANGLE=0;
var END_ANGLE=2*Math.PI;
var cx,cy;
for(var i=0;i<iloscU;i++){
    cx=Math.random()*1000;
    cy=Math.random()*1000;
    ctx.beginPath();
    ctx.arc(cx,cy,RADIUS,START_ANGLE,END_ANGLE,false);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

JSFiddle演示

注意

• 在小提琴中，我使用500而不是1000，因為演示中的畫布只有500寬度和500高度。
• 我將所有“常量”移出了循環，因為您並不需要一遍又一遍地重新計算它們。

Answer 2

添加ctx.beginPath(); 在ctx.arc()行之前。

Answer 3

我認為您的隨機數是不正確的

小提琴（您的劇本）

http://jsfiddle.net/BwEsr/

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var iloscU = 3;
for(var i=0;i<iloscU;i++){

ctx.strokeStyle = "black";
var centreX = Math.random() * 500 // limit 500 because canvas width = 500;
var centreY = Math.random() * 500 // limit 500 because canvas height = 500;
var radius = 75;

var startAngle = 0 * Math.PI/180;

var endAngle = 360 * Math.PI/180;

ctx.arc(centreX,centreY,radius,startAngle,endAngle,false);

ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();

}

Answer 4

恐怕我沒有時間進行測試，但是嘗試添加openPath和closePath：

for(var i=0;i<iloscU;i++){

ctx.beginPath(); // open a new path

ctx.strokeStyle = "black";
var centreX = Math.random() * 1000;
var centreY = Math.random() * 1000;
var radius = 75;

var startAngle = 0 * Math.PI/180;

var endAngle = 360 * Math.PI/180;

ctx.arc(centreX,centreY,radius,startAngle,endAngle,false);

ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();


ctx.closePath(); // close the path

}