web-dev-qa-db-ja.com

HTML5キャンバスに複数の円を描く際の問題

これを見てください デモを見て、コードの束を繰り返さずに、異なる座標でキャンバスに複数の円を描く方法を教えてください。

あなたがデモと次のコードで見ることができるように

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(150, 50, 5, 0, Math.PI * 2, true);
ctx.arc(20, 85, 5, 0, Math.PI * 2, true);
ctx.arc(160, 95, 5, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

それらをctxの下に配置しようとしましたが、正しくないため、forループを使用して50ポイントを作成しようとしましたが、ctx.fill（）;のようなコードの繰り返しと追加に問題があります。それらのすべてのために。これを修正する方法を教えてください。

ありがとう

javascriptjqueryhtmlhtml5-canvas
13
Suffii

これは、パスを閉じていないためです。fill()またはclosePath()を使用するとパスが閉じられるため、すべてのアイテムを接続しようとはしません。 fill()は円を埋めてパスを閉じるので、それを使用できます。また、beginPath()を使用して、互いに分離する必要があります。これがあなたの3つのサークルです：

_var coords = [ [150,50], [20,85], [160,95] ];

for(var i = 0; i < coords.length; i++){
    ctx.beginPath();
    ctx.arc(coords[i][0], coords[i][1], 5, 0, Math.PI * 2, true);
    ctx.fill();
}
_

大量のコードを繰り返さず、一意の座標を使用するには、XとYの位置を配列に格納し、forループを使用して処理します。

更新：

同じ効果を達成するためのより効率的な方法は、単一のパスのみを使用し、各円を描画するときに新しいパスを作成する代わりに moveTo() を使用することです。

_ctx.beginPath();
for(var i = 0; i < coords.length; i++){
    ctx.moveTo(coords[i][0], coords[i][1]);
    ctx.arc(coords[i][0], coords[i][1], 5, 0, Math.PI * 2, true);
}
ctx.fill();
_
10
Spencer Wieczorek
  ctx.beginPath();
  points.forEach(point => {
    ctx.moveTo( point.x, point.y );
    ctx.arc(point.x,point.y,1,0,Math.PI*2,false);
  });
  ctx.fill();
1
Bonnie Milian

フィドルの例 ループで描かれたさまざまな場所にあるたくさんの円。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext( '2d' );
var cx = canvas.width/2;
var cy = canvas.height/2;
ctx.fillStyle = "#00A308";

var total_circles = 50;
var radius = 100;
for(i = 0; i < total_circles; i++){
    var angle = i * 2 * Math.PI/total_circles;
    var x = cx + Math.cos(angle) * radius;
    var y = cy + Math.sin(angle) * radius;   
    ctx.beginPath();
    ctx.arc(x, y, 2, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}
0
light

Forループを使用して複数の円を簡単に作成できます。あなたは本当に弧を描き、毎回それを埋める必要があります。あなたの例を使用して、あなたはこのようなことをすることができます。

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
for (var i = 0; i < 3; i++) {
  ctx.arc(50 * (i+1), 50 + 15 * i, 5, 0, Math.PI * 2, true);
  ctx.fill();
}
0
Zack Argyle