2

Canvas でギアを描画しようとしていますが、最初から問題が発生しています。真ん中がくり抜かれた塗りつぶされた円が欲しいです。代わりに、単一の円の輪郭のように見えるものを取得しています。

これが私のコードです：

var ctx = document.getElementById("canvas").getContext("2d"),
i = 0;

function drawGear(){

    ctx.fillStyle = "#000";
    ctx.translate(50,50);
    ctx.arc(0,0,20,0,Math.PI*2);
    ctx.fill();

    ctx.fillStyle = "#FFF";;
    ctx.arc(0,0,5,0,Math.PI*2);
    ctx.fill();
}

drawGear();

http://jsfiddle.net/te3jn/

この問題はglobalCompositeOperationに関連するものだと思いますが、それらのいくつか（source-over、source-atop、destination-over）を試しましたが、希望どおりに機能するものはありません。

4

1 に答える 1

3

次のように、2 番目の円を描くときに新しいパスを開始する必要があります。

ctx.fill();

ctx.beginPath();
ctx.fillStyle = "#FFF";
// ...

JSフィドル。

これがないと、基本的に両方の円 (内側と外側の円) を 2 回目のfill呼び出しで再描画します (デモについては、このフィドルを確認してください)。

于 2013-09-16T01:38:11.860 に答える