javascript - 在另一个圆形画布内绘制一个圆形

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小提琴。

没有这个，你基本上会用第二次调用重绘两个圆圈 - 内部和外部的fill（检查this fiddle for demo）