在HTML5画布中屏蔽形状？

Question

道歉，如果有人在其他地方被问过，但很难说出来，因为它是如此，我找不到任何东西。

有没有办法在画布上实现蒙版？

例如，仅使用形状（无图像）我用窗口绘制房屋。我也有一个代表一个人的形状。我希望那个人出现在窗口 - 但显然只有窗口允许才能看到这个人。其余的将被掩盖。

我想要清空窗户占据的房屋部分，这样层中就有一个真正的洞，这使问题很容易解决。

但是我意识到你不能在画布中删除形状或部分形状，只能在旧东西上绘制新东西。所以在多层次的环境中（我在Kinetic.JS中制作游戏），我到底能做什么？

很抱歉，如果对此有任何解释不充分 - 对整个图形事物都是新的。

Answer 1

你应该尽快学习剪辑和合成，但这些都不是你真正需要的。

相反，您需要学习如何使用非零绕组编号规则来创建路径，这是HTML5画布使用的。

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

以下是一个带窗口的示例：

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

---

编辑：这里有一个关于非零绕组编号规则如何工作的可视化：

在一个方向上绘制子路径，并且在路径交叉的地方，您将填充（或不填充）空格。

如果你把手指放在图的任何部分上，想象一条线从你的手指伸出到空的空间，那条线就会多次穿过这条路。如果从零开始并为每个顺时针路径添加1，并为每个逆时针路径减去1，则填充区域是具有非零数字的所有区域。这些区域的数字在上图中给出。

Answer 2

你只需创建一个剪切路径并在那里绘制你的形状。 Mozilla开发者网络是学习画布的好地方。以下是clipping的部分。

我已经创建了一个基本fiddle，其中包含了我认为您要创建的示例。

var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0, 0, 150, 150);

// create a clipping path
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 130);
ctx.lineTo(130, 130);
ctx.lineTo(130, 20);
ctx.clip();

// backgroud in clipped area
ctx.fillStyle = "#11c";
ctx.fillRect(0, 0, 150, 150);

// draw shapes inside clipped area
ctx.translate(75, 90);

ctx.fillStyle = '#f00';

ctx.fillRect(-15, -40, 40, 40);
ctx.fillRect(0, 0, 10, 10);
ctx.fillRect(-25, 10, 60, 60);

希望这会有所帮助，祝你的项目好运！