html - 在 HTML5 Canvas 中屏蔽形状？

Question

如果在其他地方有人问过这个问题，我深表歉意，但很难用它来表达，所以我找不到任何东西。

有什么方法可以在 Canvas 中实现蒙版吗？

例如，我只使用形状(没有图像)画了一个带 window 的房子。我还有一个代表人的形状。我希望那个人出现在窗口 - 但显然只能在窗口允许的范围内看到这个人。其余的将被掩盖。

我想过把房子被 window 占的部分清空，这样层里就有一个真正的洞，这样问题就容易解决了。

但我知道您不能删除 Canvas 中的形状或部分形状，只能在旧内容上绘制新内容。那么在多层环境中(我正在使用 Kinetic.JS 制作游戏)，我究竟能做什么？

很抱歉，如果其中任何一个解释不当 - 整个图形事物都是新的。

Answer 1

您应该很快就会了解裁剪和合成，但这些都不是您在这里真正需要的。

相反，您需要学习如何使用 非零缠绕数规则 制作路径，这正是 HTML5 Canvas 所使用的。

如果您顺时针绘制路径的一部分而逆时针绘制另一部分，则可以从路径中“切出”形状。

这是一个带有窗口的示例:

http://jsfiddle.net/simonsarris/U5bXf/

---

编辑:下面是非零循环数规则如何工作的可视化图:

子路径是在一个方向上绘制的，在路径交叉的地方你会得到填充(或不填充)的空间。

如果您将手指放在图形的任何部分，并想象一条线从您的手指延伸到空白空间，则该线会多次穿过该路径。如果从零开始，每条顺时针路径加 1，每条逆时针路径减 1，则填充区域是所有具有非零数字的区域。上图中给出了区域的编号。