在路径中绘制不同颜色的形状（HTML5画布/Javascript）

我试图画多个不同颜色的圆弧

        //-------------- 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();

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

---

有人能告诉我如何做到这一点吗？我做错了什么？

关闭路径，然后重新打开它

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

…在弧绘图代码之间

---

路径以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（）； 填充（）

---

任何形状都可以这样做。试着在一个方向上画一个弧，然后在相反方向上用较小的半径画另一个弧

当你闭合路径时，我相信它会同时画出这两个弧（红色弧下的黑色弧代表较小的圆）。好问题，我只是想知道这一点，你的问题和回答帮了我。谢谢！

closePath

没有结束路径声明，它只是一个

moveTo（firstDeclaredCoordinates）

endPath

在canvas2D API中不存在，

closePath

没有结束路径声明，它只是一个

moveTo（firstDeclaredCoordinates）

。我的错，请删除结束路径。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,20）；lineTo（20,20）；closePath（）；fill（）；但是，我在一些浏览器上看到在未使用closePath时出现填充漏洞。