web-dev-qa-db-ja.com

キャンバスの円弧のさまざまなfillStyle色

これに対する解決策は非常に単純であると思いますが、これが痛々しいほど明白である場合は事前に謝罪しますが、2つの異なる円弧に2つの異なるfillStylesを設定する方法を理解できないようです...カラーサークル。以下では、キャンバスの他の形状/描画メソッドを使用して通常それを行う方法を示しますが、何らかの理由で弧を使用すると、両方の弧が最後のfillStyleに設定されます。

ctx.fillStyle = "#c82124"; //red
ctx.arc(15,15,15,0,Math.PI*2,true);
ctx.fill();

ctx.fillStyle = "#3370d4"; //blue
ctx.arc(580,15,15,0,Math.PI*2,true);
ctx.fill();
javascriptcanvascolorsfillgeometric-arc
21
Nick

パスの開始ステートメントと終了ステートメントが不足していると思います。次のことを試してください（jsfiddleで機能します ここを参照 ）

ctx.fillStyle = "#c82124"; //red
ctx.beginPath();
ctx.arc(15,15,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#3370d4"; //blue
ctx.beginPath();
ctx.arc(580,15,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
39
puk

パスは単なるジオメトリであることに注意してください。 _.fillStyle_は、fill( )までいつでも設定できます。

1
Tim Erickson