在HTML5画布中屏蔽形状？

如果有人问我这个问题，我会向你道歉，但这很难表达，所以我什么也找不到

有没有办法在画布中实现掩码？

例如，仅使用形状（无图像）我画了一座带窗户的房子。我还有一个代表人的形状。我希望那个人出现在窗口——但显然，只有在窗口允许的范围内，这个人才能看到。其余的将被掩盖

我想清空窗户占据的房子部分，这样在这一层上就有一个真正的洞，这使得问题很容易解决

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

---

很抱歉，如果对其中任何一个解释得不好-这是整个图形的新内容。

您只需要创建一个剪裁路径并在其中绘制您的形状。Mozilla开发者网络是学习canvas的一个很好的起点。这是关于的部分

我创建了一个basic，其中有一个我认为您正在尝试创建的示例

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

---

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

你应该很快学会剪辑和合成，但这两个都不是你真正需要的

相反，您需要学习如何使用非零卷绕数规则创建路径，这正是HTML5Canvas所使用的

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

下面是一个带有窗口的示例：

---

编辑：这里有一点关于非零绕组编号规则工作原理的可视化：

子路径是在一个方向上绘制的，在路径交叉的地方，您将得到填充（或不填充）的空间

---

如果你把手指放在图形的任何部分，想象一条线从你的手指伸到空白处，那条线会多次穿过路径。如果从零开始，每个顺时针方向的路径加1，每个逆时针方向的路径减1，则填充区域是所有编号非零的区域。上图中给出了区域的编号。

这里可能会给出一些建议，谢谢您的帮助和帮助。剪纸对我来说是个启示。从未意识到，只要在开放的路径上绘制形状，而不是填充它们，就可以有效地将某些区域标记为透明（这似乎就是您正在做的）。这背后的设计选择是什么，还是黑客？有点离题的问题：为什么进来，我不能得到一个简单的笔划矩形-它坚持被填充（目前为橙色）？此外，这种剪切技术是否只适用于线绘制的路径？尝试通过

rect（）

而不是使用

lineTo（）

命令绘制初始蓝色正方形，但切口不再出现。确切地说，这不是开放路径与闭合路径，而是绘制路径的方向。让我再做一把小提琴给你们举个例子：你们知道当你们在纸上画一个圆圈时，你们可以顺时针或逆时针画吗？所有的路都是这样的。任何时候顺时针路径和逆时针路径交叉，都会留下未填充区域。查看编辑以获得可视化效果这很吸引人，因为这种行为似乎没有逻辑基础。如果你用钢笔做同样的事情，你不会得到同样的结果，那么这个功能纯粹是为了方便你处理像我这样的情况吗？还是我遗漏了发生这种情况的数学和逻辑原因？我明白这是有用的，只是不是它发生的确切原因。我接受了另一个答案，只是因为他让我看到了非零卷绕数规则的概念，这是一个启示，但我很感谢你的回答和详细的小提琴-这是最有帮助的+谢谢，很高兴你找到了解决办法。我也不知道非零绕组规则的概念，所以我也设法学到了一些东西。