如果这个问题在其他地方已经被问过了，我很抱歉，但它的表达方式非常困难，所以我找不到任何东西。
是否有办法在画布中实现蒙版效果？
例如，只使用形状（没有图像），我画了一幢房子，并在其中画了一个窗户。我还有一个表示人物的形状。我想让这个人出现在窗户前面，但显然只有窗户允许显示的部分才能看到这个人。其余部分将被裁剪。
我考虑过清空窗户所占据的房子部分，从而在图层上形成一个真正的洞，这样问题就容易解决了。
但是我知道你不能在画布上删除形状或形状的部分，只能在旧的东西上绘制新的东西。因此，在多层环境中（我正在使用Kinetic.JS制作游戏），我应该怎么做呢？
对不起，如果我的表述有误 - 对图形完全陌生。
你应该尽快了解剪辑和合成，但这两者都不是你在这里真正需要的。
相反，你需要学习如何使用“非零环绕数规则”创建路径，这是HTML5画布使用的规则。
如果你画出路径的一部分顺时针方向，另一部分逆时针方向，可以从路径中“切除”形状。
以下是一个窗户的示例：
http://jsfiddle.net/simonsarris/U5bXf/
编辑：以下是非零环绕数规则的可视化示例：
子路径沿着一个方向绘制，路径交叉的地方会出现填充（或未填充）的区域。
如果你把手指放在图形的任何部位，想象一条线从手指伸入空白区域，那么该线将穿过路径多次。如果从零开始，对于每个顺时针路径加1，对于每个逆时针路径减1，具有非零数量的区域是所有填充区域，上图中各区域的数量已给出。
您只需要创建一个剪辑路径并在其中绘制您的形状。Mozilla开发者网络是学习画布的好起点。这里是关于剪辑的部分。
我创建了一个基本的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);