我有一个 Canvas ，上面还画了很多东西，现在我想填充一个定义为整个 Canvas 的区域，除了几个洞(我的洞是带弧形的复杂形状)。
只有一个洞，很简单:我通过首先制作一个带有整个 Canvas 矩形的子路径然后制作第二个具有相反缠绕的子路径来制作路径。因此，当我填充生成的路径时，我有效地填充了我的 Canvas ，除了洞。
有几个孔，只要我的孔不相交，它就可以工作:如果相交，此方法会填充我的孔的相交部分，这不是预期的结果。
所以问题来了:如何用相交的孔填充形状？
现在我不想尝试明确地计算我的形状的并集，因为它们很复杂(涉及弧线......)。这就是我没有尝试使用 getImageData() 的原因。
这是一个图形解释:
这应该非常快，因为源 Canvas 和孔都是动画的，但屏幕上几乎不会超过 3 个孔。
最佳答案
我不确定我是否明白问题出在哪里。您只是想在某物之上绘制路径并填充路径的并集？
这在 Canvas 上很容易做到。 Canvas 让您可以绘制路径和子路径，并且您会想要绘制一系列的多个子路径(但只能绘制一个路径)。为避免缠绕，您需要沿同一方向(顺时针或逆时针)绘制所有子路径。
这是一个路径的例子，它实际上是两个子路径的联合，形成一个“洞”:
请注意，我只调用了一次 BeginPath，然后使用 closePath 和 moveTo 开始我的新子路径。
如果你想填充它的反转，你可以填充一个内存 Canvas ，将路径绘制为内存 Canvas 的剪切区域，将你的普通 Canvas 绘制到内存 Canvas 上内存 Canvas ，然后将内存 Canvas 绘制回普通 Canvas 。 Here's an example of that
关于javascript - 用孔填充区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7648781/