0

だから私はループで円を描きたいのですが、コードを実行すると次のようになります:

ここに画像の説明を入力

ランダムな場所に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

4 に答える 4

2

あなたはまだ同じパスにいるので、canvas はポイントを「並べて」表示します。

分離するには、図形を描画するたびに新しいパスを開始し、完了したら閉じます。

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、高さ 500 しかないため、1000 ではなく 500 を使用しました。
  • 何度も何度も再計算する必要がないので、すべての「定数」をループの外に移動しました。
于 2013-09-27T09:21:06.053 に答える
0

ctx.beginPath();行の前に追加しctx.arc()ます。

于 2013-09-27T09:05:34.927 に答える
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();

}
于 2013-09-27T09:07:13.337 に答える
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

}
于 2013-09-27T09:19:28.587 に答える