填充有洞的区域

Question

我有一个画布，但画了很多东西，现在我想填充一个定义为整个画布的区域，除了几个洞（我的洞是带弧的复杂形状）。

只有一个洞，这很简单：我通过首先制作一个带有整个画布rect的子路径然后制作一个具有相反绕组的第二个子路径来制作路径。因此，当我填充生成的路径时，除了洞之外，我有效地填充了我的画布。

只要我的孔不相交，只有几个孔，它也可以工作：在交叉的情况下，这个方法会填充我的孔的交叉部分，这不是理想的结果。

所以这就是问题所在：如何填充有交叉孔的形状？

现在我宁愿不尝试明确地计算我的形状的结合，因为它们的复杂性（涉及弧...）。这就是为什么我没有尝试使用getImageData（）。

以下是图解说明：

这应该非常快，因为源画布和孔都是动画的，但屏幕上几乎不会有超过3个孔。

Answer 1

我不确定我是否知道问题所在。你只是想在某些东西上绘制路径并填充路径的联合？

在Canvas上很容易做到。 Canvas允许您绘制路径和子路径，并且您将要绘制一系列多个子路径（但只有一个路径）。为避免缠绕，您需要沿相同方向（顺时针或逆时针）绘制所有子路径。

这是一个路径的例子，它实际上是两个子路径的结合，形成一个“洞”：

http://jsfiddle.net/KX8Xf/

请注意，我只调用BeginPath一次，然后使用closePath和moveTo启动新的子路径。

如果要填充反向，可以填充内存中的画布，将路径绘制为内存中画布的剪切区域，将普通画布绘制到 - 内存画布，然后将内存中的画布绘制回普通画布。 Here's an example of that