掩蔽的形状在HTML5画布？(Masking shapes in HTML5 canvas?)

道歉，如果这已在别处问，但它是相当困难的词，因为它是让我无法找到任何东西。

有什么办法来实现在帆布口罩？

例如，仅使用形状（无图像）我画一个房子的窗口。 我也有代表一个人的形状。 我想那个人出现在窗口 - 但显然只有这么多的窗口允许应该是人的可见光。 其余部分将被屏蔽。

我想过排空由窗口所占用，例如，有在层，这使得问题容易解决一个真正的孔家的一部分。

但我意识到，你不能删除形状或形状的部件在画布上，只有在旧的东西吸引新的东西。 因此，在一个多层次的环境（我在做一个游戏Kinetic.JS），正是我该怎么办？

很抱歉，如果任何的，这是解释不清 - 新来的整个图形的事情。

Answer 1:

你应该了解裁剪很快合成，但这些都不是你真正需要的在这里。

相反，你需要学习如何使用非零绕数规则 ，这是HTML5画布用来做路径。

如果绘制路径顺时针滑动您的一部分，另一部分逆时针旋转，你可以从你的路径“切出”形状。

这里有一个窗口的例子：

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

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

文章来源: Masking shapes in HTML5 canvas?