如何使用html5 canvas实现图片玻璃碎片特效

小编给大家分享一下如何使用html5 canvas实现图片玻璃碎片特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

html代码

    
<脚本src="delaunay.js">

js代码：

//画布设置varimageWidth=768，imageHeight=485；var顶点=[]，索引，方格=[]；varimage，片段=[]，容器=document.getElementById（'container'）;_window.onload=function（）{image=document.getElementById（'src_img'）;triangulate（）;makeBoxes（）;makeFragments（）;};函数triangulate（）{varx，y，dx=imageWidth/8，dy=imageHeight/8，offset=0.5;对于（vari=0;i<=imageWidth;i+=dx）{for（varj=0;j<=imageHeight;j+=dy）{    如果（i&&（i！==imageWidth））x=i+randomRange（-dx*offset，dx*offset）;否则x=i;if（j&&（j！==imageHeight））y=j+randomRange（-dy*偏移量，dy*偏移量）;否则y=j;vertices.push（[x，y]）;}}指数=Delaunay.triangulate（顶点）;}函数makeBoxes（）{varp0，p1，p2，xMin，xMax，yMin，yMax;for（vari=0;i
以上是"如何使用html5 canvas实现图片玻璃碎片特效"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！