Question

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

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

提前致谢。

Answer 1

您需要做的就是首先使用“splatter”创建并加载图像。然后将画布的合成模式设置为destination-out，只需在画布上绘制图像：

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

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

正如您所看到的那样，在画布上打出一个洞，以便可以看到背景。