如何使用html5 canvas實現圖片玻璃碎片特效

小編給大家分享一下如何使用html5 canvas實現圖片玻璃碎片特效，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

      html代碼

    <imgsrc=“city_copy.jpg”id=“src_img”class=“hidden”><divid=“container”style=“-webkit-perspective：500px;”><div><腳本src=“delaunay.js“></script><scriptsrc=”TweenMax.min.js“></script>

    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<index.length;i+=3）{p0=頂點[indices[i+0]];p1=頂點[索引[i+1]]；p2=頂點[索引[i+2]]；xMin=Math.min（p0[0]，p1[0]，p2[0]）;xMax=Math.max（p0[0]，p1[0]，p2[0]）;yMin=Math.min（p0[1]，p1[1]，p2[1]）;
    yMax=Math.max（p0[1]，p1[1]，p2[1]）;box.push（{x：xMin，y：yMin，w：xMax-xMin，h：yMax-yMin}）;}}函數makeFragments（）{VARP0，P1，P2，盒，片段;TweenMax.set（container，{Perspective：500}）;vartl0=newTimelineMax（{repeat：-1}）;for（vari=0;i<index.length;i+=3）{p0=頂點[indices[i+0]];p1=頂點[索引[i+1]]；p2=頂點[索引[i+2]]；box=box[i/3];片段=新片段（p0，p1，p2，box）;varrx=randomRange（30，60）*（（i％2）？1：-1）;varry=randomRange（30，60）*（（i％2）？-1：1）;
    vartl1=newTimelineMax（）;TweenMax.set（fragment.canvas，{y：box.y-1000}）;tl1.to（fragment.canvas，randomRange（0.9，1.1），{y：box.y，ease：Back.easeOut}）;tl1.to（fragment.canvas，0.5，{z：-100，easy：Cubic.easeIn，delay：0.4}）;tl1.to（fragment.canvas，randomRange（1，1.2），{rotationX：rx，rotationY：ry，z：250，alpha：0，easy：Cubic.easeOut}）;tl0.insert（tl1）;fragment.push（fragment）;container.appendChild（fragment.canvas）;}}函數randomRange（min，max）{
    返回min+（max-min）*Math.random（）;}片段=函數（v0，v1，v2，框）{this.v0=v0;this.v1=v1;this.v2=v2;this.box=盒子;this.canvas=document.createElement（'canvas'）;this.canvas.width=this.box.w;this.canvas.height=this.box.h;this.canvas.style.width=this.box.w+'px';this.canvas.style.height=this.box.h+'px';this.ctx=this.canvas.getContext（'2d'）;TweenMax.set（this.canvas，{x：this.box.x，y：this.box.y}）;this.ctx.translate（-this.box.x，-this.box.y）;this.ctx.beginPath（）;this.ctx.moveTo（this.v0[0]，this.v0[1]）;
    this.ctx.lineTo（this.v1[0]，this.v1[1]）;this.ctx.lineTo（this.v2[0]，this.v2[1]）;this.ctx.closePath（）;this.ctx.clip（）;this.ctx.drawImage（image，0，0）;};//@sourceURL=pen.js

以上是“如何使用html5 canvas實現圖片玻璃碎片特效”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！