4

私はそこに同様の質問を見つけましたが、答えはありません。私はそのように円をスケッチしました

ctx.strokeStyle='rgb(0,0,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();

これにより、(100,100) に位置する半径 45 の円が得られ、線幅に 5 を足すと、半径 50 の円になります。次に、まったく同じ円を別の色で、元の 1/4 だけスケッチしたいと思います。状況 (XBOX 360 の運命の赤いリングを考えてみてください)。だから私はこれを試しました

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
ctx.closePath();
ctx.stroke();

しかし、それには最初と最後のポイントをつなぐという非常に厄介な側面があります (テキストを埋め込むときのように、canvas 要素を誰が作成したのか疑問に思うことがありますが、それについては触れないでください...)

4

1 に答える 1

7

不要な行をコメントアウトしました。を呼び出すことによりclosePath()、円弧のパスを閉じます。

例

3/4アーク

JavaScript

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
//ctx.closePath();
ctx.stroke();

jsFiddle .

于 2011-03-26T00:21:59.847 に答える