在画布的循环中绘制圆圈

时间:2013-09-27 09:00:34

标签: javascript html5

所以我想在循环中绘制一个圆圈,但是当我运行我的代码时,我会得到这样的东西:

enter image description here

它应该在随机位置绘制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();
}

我知道它有点愚蠢,但我不知道是什么:(

4 个答案:

答案 0 :(得分:1)

因为你仍然在同一个path,所以画布“为你排队”。

要分开,每次要绘制形状时都要开始一条新路径,并在完成后关闭它:

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 demo

请注意

  • 在小提琴中,我使用了500而不是1000,因为演示中的画布只有500宽度和500高度;
  • 我将所有“常量”移出循环,因为你不需要一遍又一遍地重新计算它们。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我认为你的后代是无法解决的

小提琴(你的剧本作品)

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

}

答案 3 :(得分:0)

我没时间测试这个我害怕但是尝试添加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

}