在路径中绘制不同颜色的形状（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

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

Answer 2

路径以beginPath开头，以endPath结尾。 介于两者之间的每件事都是相同的道路。您甚至可以使用侧翼规则绘制带孔的路径。在一个方向上绘制一些东西，在相反的方向上绘制其他东西，但在第一个方面 让我们用线画一个中间有一个洞的矩形。     beginPath方法（）;       moveTo（10,10）;       了lineTo（100,10）;       了lineTo（（100,60）;       了lineTo（10,60）;       了lineTo（10,10）;       closePath（）;       的moveTo（20,20）;       了lineTo（20,50）;       了lineTo（90,50）;       了lineTo（90,20）;       了lineTo（20,20）;       closePath（）;     endPath（）;     补（）;

你可以用任何形状做到这一点。使用较小的半径

在一个方向上尝试弧形，然后在相反方向上尝试另一个弧形