4

したがって、これがキャンバスに円を描くために使用しているコードである場合:

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.strokeStyle = "black";
ctx.stroke();

...この円を構成するポイントの座標の配列を取得して、それらをデータベースに保存し、後で context.moveTo() および context.lineTo() メソッドを使用してキャンバスにロードしてドットを接続するにはどうすればよいですか? 、同じ円を描く？

.arc() メソッドではなく、中心座標と円の半径 (そしてもちろん線と色の幅) だけを知っていれば、点を線で結ぶことによって、この種の円を描くことが可能かどうかを尋ねていると思います。 ）。これにより、ループするときに各ドット座標を配列に保存できるようになります。

4

2 に答える 2

6

@Octopus は正しい軌道に乗っています。

var centerX=100;
var centerY=100;
var radius=40;

// an array to save your points
var points=[];

for(var degree=0;degree<360;degree++){
    var radians = degree * Math.PI/180;
    var x = centerX + radius * Math.cos(radians);
    var y = centerY + radius * Math.sin(radians);
    points.push({x:x,y:y});
}

次に、points 配列内の point オブジェクトを使用して円を描画できます。

ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for(var i=1;i<points.length;i++){
    ctx.lineTo(points[i].x,points[i].y);
}
ctx.closePath();
ctx.fillStyle="skyblue";
ctx.fill();
ctx.strokeStyle="lightgray";
ctx.lineWidth=3;
ctx.stroke()

提案ですが...

すべてのポイントをデータベースに保存する代わりに、centerX/Y と radius だけをデータベースに保存します。

次に、この同じ計算を使用して点を作成し、円を描くことができます。

于 2013-08-20T18:51:57.383 に答える
1

次の円の公式を求めています。

radius*radius = (x-centerX)*(x-centerX) + (y-centerY)*(y-centerY)

または、n 個のポイントを生成する場合は、次のようにします。

for (i=0;i<n;i++) {
    x[i] = centerX + radius* Math.cos( (i*2*Math.PI)/n );
    y[i] = centerY + radius*-Math.sin( (i*2*Math.PI)/n );
}
于 2013-08-20T18:32:23.617 に答える