抱歉，如果在其他地方问过这个问题，但很难说清楚，所以我找不到任何东西。
有没有办法在画布中实现遮罩？
例如，仅使用形状（无图像）我画了一栋带窗户的房子。我也有一个代表一个人的形状。我希望那个人出现在窗口 - 但显然只有窗口允许的那个人才能看到。其余部分将被屏蔽。
我想过把房子被窗户占用的部分清空，这样层上有一个真正的洞，这样问题就容易解决了。
但我知道你不能删除画布中的形状或形状的一部分，只能在旧的东西上绘制新的东西。那么在多层环境中（我正在用 Kinetic.JS 制作游戏），我究竟能做什么？
很抱歉，如果其中任何内容解释不当 - 对整个图形来说都是新事物。
【问题讨论】：
标签： html canvas shape mask kineticjs
您应该很快了解剪辑和合成，但这些都不是您真正需要的。
相反，您需要学习如何使用非零缠绕数规则创建路径，这是 HTML5 画布使用的。
如果您顺时针绘制路径的一部分，而逆时针绘制另一部分，则可以从路径中“切出”形状。
这是一个带有窗口的示例：
http://jsfiddle.net/simonsarris/U5bXf/
编辑：以下是非零缠绕数规则如何工作的可视化：
子路径是按一个方向绘制的，路径交叉的地方会填充（或不填充）空格。
如果您将手指放在图形的任何部分，并想象一条线从您的手指伸到空白处，那条线会多次穿过路径。如果从零开始，每条顺时针路径加 1，每条逆时针路径减 1，则填充区域是所有具有非零数字的区域。这些区域的数字如上图所示。
【讨论】：
rect() 而不是使用lineTo() 命令绘制初始蓝色方块，但切口不再出现。
您只需要创建一个剪切路径并在其中绘制您的形状。 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);
希望这会有所帮助，祝你的项目好运！
【讨论】：