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

你可以用任何形状做到这一点。 使用较小的半径在一个方向上尝试弧形，然后在相反方向上尝试另一个弧形