抱歉,是否在其他地方提出过此要求,但是很难用它来表述,因为我找不到任何东西。

有什么方法可以在 Canvas 中实现 mask 吗?

例如,仅使用形状(无图像)我用 window 画房子。我也有一个代表人的形状。我希望该人出现在窗口中-但显然只有在该窗口允许的范围内,该人才应该可见。其余的将被掩盖。

我考虑过要清空 window 所占据的那部分房屋,以便在该层上有一个真正的孔,这使问题易于解决。

但是我意识到您不能删除 Canvas 中的形状或部分形状,只能在旧内容上绘制新内容。因此,在多层环境中(我正在Kinetic.JS中制作游戏),我该怎么办?

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

最佳答案

您应该很快就了解剪辑和合成的知识,但这两者都不是您真正需要的。

相反,您需要学习如何使用非零卷绕数规则进行路径创建,这是HTML5 canvas所使用的。

如果沿顺时针方向绘制路径的一部分,沿逆时针方向绘制路径的另一部分,则可以从路径中“切出”形状。

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

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

编辑:这是一些有关非零绕组数规则如何工作的可视化效果:

子路径是在一个方向上绘制的,路径穿过的地方将填充(或不填充)空间。

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

10-05 20:57
查看更多