html5图片碎片效果,一块html5 canvas实现的图片玻璃碎片特效

复制代码

代码如下：

js代码：

复制代码

代码如下：

//画布设置varimageWidth=768，imageHeight=485；var顶点=[]，索引，方格=[]；varimage，片段=[]，容器=document.getElementById('container');window.οnlοad=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

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

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