在HTML5画布中屏蔽形状？

Question

如果在其他地方被问过这个问题，我很难道歉，因为它很难说，所以我找不到任何东西。

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

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

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

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

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

Answer 1

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

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

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

这是一个带窗口的示例：

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

---

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

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

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

Answer 2

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

我已经创建了一个基本的小提琴，其中有一个我认为你想要创建的例子。

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);

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