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进行演示）

在另一个圆形画布内画一个圆圈

1 个答案: