用图像遮罩画布答案

【问题标题】：Mask a canvas with image用图像遮罩画布
【发布时间】：2013-06-19 08:24:45
【问题描述】：

情况是这样的：我需要做一个“飞溅”效果来显示背后的内容（无论是身体背景图像，还是谷歌地图）。我正在考虑在实际内容之上覆盖一个画布。画布最初将具有不透明（白色）背景。然后，我将使用飞溅图像和interval 对其进行遮盖以显示底层内容。

我发现这个小提琴做了类似的事情：http://jsfiddle.net/VqCbv/43/ 但是，遮罩是用fillRec 和createLinearGradient 绘制的，我可以修改代码以使用实际图像作为遮罩，以获得更灵活的形状吗？

提前致谢。

【问题讨论】：

【解决方案1】：

您需要做的就是首先创建并加载带有“飞溅”的图像。然后将画布的合成模式设置为destination-out，然后在画布上简单地绘制图像：

ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(img, 0, 0);

将会发生的情况是，图像中的所有像素都会移除画布上的像素，从而将图像所在的区域保留为透明区域。其他像素（白色）将保持不变。

如您所见，画布上打了一个洞，因此背景可见。

【讨论】：