在路径中绘制不同颜色的形状（HTML5 Canvas / Javascript）答案

【问题标题】：Drawing different colored shapes in a path (HTML5 Canvas / Javascript)在路径中绘制不同颜色的形状（HTML5 Canvas / Javascript）
【发布时间】：2011-11-03 07:27:10
【问题描述】：

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

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

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

任何人都可以阐明我如何做到这一点吗？我做错了什么？

【问题讨论】：

当你关闭路径时，我相信它会同时绘制它们（黑色一个在红色下面，用于较小的圆圈）。
好问题，我只是想知道这一点，您的问题和回答帮助了我。谢谢！

标签： javascript html canvas draw

【解决方案1】：

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

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

jsFiddle.

...圆弧之间的绘制代码。

【讨论】：

closePath 不会结束路径声明，它只是一个moveTo(firstDeclaredCoordinates)。

【解决方案2】：

路径以 beginPath 开始，以 endPath 结束。介于两者之间的每一件事都是相同的路径。您甚至可以使用翼规则绘制带有孔的路径。在一个方向上画一些东西，在相反的方向上画一些东西，但在第一件事里面。让我们用线条画一个中间有一个洞的矩形。开始路径（）；移动到（10,10）；线到（100,10）； lineTo((100,60); 线到（10,60）；线到（10,10）；关闭路径（）；移动到（20,20）；线到（20,50）；线到（90,50）；线到（90,20）；线到（20,20）；关闭路径（）；结束路径（）；填充（）；

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

【讨论】：

endPathdoesn't exist in canvas2D API，closePath 并没有结束路径声明，它只是一个moveTo(firstDeclaredCoordinates)。
我的错，删除结束路径。开始路径（）；移动到（10,10）；线到（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(); fill();
但是，当没有使用 closePath 时，我在某些浏览器上看到了填充泄漏。