2

2 つのアークを含むパスがあり、最初のアークが作成され、2 番目のアークが作成されると、それらが同じパス内に含まれている場合、それらは自動的に接続/結合されますが、一方の端でのみ結合され、もう一方の端には結合されます。何もありません。どうすれば相手側でも参加するように指示できますか?

実際の例はここにあります（実際には4つのアークが含まれていますが、パスごとに2つ含まれています）：http://jsfiddle.net/QjLT2/

ここに画像の説明を入力

var ctx = document.getElementById("display").getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 20, Math.PI/2, 0.0, true);
ctx.arc(100, 100, 50, 0.2, Math.PI/2, false);
//ctx.lineTo(100, 100+17);

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(200, 200, 20, Math.PI/1.5, 0.0, true);
ctx.arc(200, 200, 50, 0.0, Math.PI/1.5, false);
//ctx.lineTo(200, 200+17);

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
​
4

1 に答える 1

3

ここを参照してください：http://jsfiddle.net/QjLT2/6/

strokeStyle1) 実際に値を変更しない限り、 orlineWidthを複数回設定する必要はありません。コンテキストには追跡する「状態」の概念があるため、これを行うと実際にパフォーマンスが低下します。

2)完成したパスをストロークさせたい場合は、呼び出すclosePath前に呼び出す必要があります。stroke

var ctx = document.getElementById("display").getContext('2d');

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;

ctx.beginPath();
ctx.arc(100, 100, 20, Math.PI/2, 0.0, true);
ctx.arc(100, 100, 50, 0.0, Math.PI/2, false);
ctx.closePath();

ctx.stroke();

ctx.beginPath();
ctx.arc(200, 200, 20, Math.PI/1.5, 0.0, true);
ctx.arc(200, 200, 50, 0.0, Math.PI/1.5, false);
ctx.closePath();

ctx.stroke();​
于 2012-12-05T19:57:04.817 に答える