情况就是这样:我需要做一个“飞溅”效果来显示背后的内容(无论是身体背景图像,还是谷歌地图)。我正在考虑在实际内容之上覆盖一个画布。画布最初将具有不透明(白色)背景。然后,我将用飞溅的图像遮盖它并interval
显示底层内容。
我发现这个小提琴做了类似的事情:http: //jsfiddle.net/VqCbv/43/
但是,蒙版是用绘制的fillRec
,createLinearGradient
我可以以某种方式修改代码以使用蒙版的实际图像,以获得更灵活形状?
提前致谢。
情况就是这样:我需要做一个“飞溅”效果来显示背后的内容(无论是身体背景图像,还是谷歌地图)。我正在考虑在实际内容之上覆盖一个画布。画布最初将具有不透明(白色)背景。然后,我将用飞溅的图像遮盖它并interval
显示底层内容。
我发现这个小提琴做了类似的事情:http: //jsfiddle.net/VqCbv/43/
但是,蒙版是用绘制的fillRec
,createLinearGradient
我可以以某种方式修改代码以使用蒙版的实际图像,以获得更灵活形状?
提前致谢。
您需要做的就是首先创建并加载带有“飞溅”的图像。然后将画布的合成模式设置为destination-out
并简单地在画布上绘制图像:
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(img, 0, 0);
将会发生的是,图像中的所有像素都将删除画布上的像素,将图像所在的区域作为透明区域。其他像素(白色)将完好无损。
演示(点击画布飞溅):http:
//jsfiddle.net/AbdiasSoftware/4A4Qv/
如您所见,画布上打了一个洞,因此背景可见。