html - 用图像遮罩画布

Question

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

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

提前致谢。

Answer 1

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

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

将会发生的是，图像中的所有像素都将删除画布上的像素，将图像所在的区域作为透明区域。其他像素（白色）将完好无损。

演示（点击画布飞溅）：http:
//jsfiddle.net/AbdiasSoftware/4A4Qv/

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