javascript - 在另一个圆形 Canvas 内绘制一个圆形

Question

我正在尝试在 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)，但似乎没有一个能按照我想要的方式工作。

Answer 1

在绘制第二个圆时，您应该开始一条新路径，如下所示:

ctx.fill();

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

JS Fiddle .

如果没有这个，您实际上将通过第二个 fill 调用重新绘制两个圆圈 - 内部和外部圆圈(请查看 this fiddle 进行演示)