0

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

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

提前致谢。

4

1 回答 1

1

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

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

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

演示(点击画布飞溅):http:
//jsfiddle.net/AbdiasSoftware/4A4Qv/

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

于 2013-06-19T15:58:26.987 回答