在路径中绘制不同颜色的形状(HTML5 Canvas/Javascript)

Question

我正在尝试绘制多个填充不同颜色的圆弧

        //-------------- draw
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(30, 30, 20, 0, Math.PI*2, true);
        ctx.fill();
        ctx.fillStyle = "red";
        ctx.arc(100, 100, 40, 0, Math.PI*2, true);
        ctx.fill();
        ctx.closePath();

这会产生两个用红色填充的弧线,我可以看出在较小的弧线周围有一个微弱的黑色轮廓.

任何人都可以阐明如何实现这一目标吗？我做错了什么？

Answer 1

关闭路径,然后重新打开它.

ctx.closePath();
ctx.beginPath();

jsFiddle.

......弧形图代码之间.