HTML5 canvas for picture glass fragment effects

Today to bring you a HTML5 canvas implementation of the picture glass fragment effect. The picture appears in the form of a glass fragment to the interface, and then the effect of the broken glass is gradually message. As follows:

Online preview Source Download

Implementation code:

HTML code:

  <imgsrc= "City_copy.jpg"ID= "Src_img"class= "hidden">    <DivID= "Container"style= "-webkit-perspective:500px;">        <Div>            <Scriptsrc= "Delaunay.js"></Script>            <Scriptsrc= "TweenMax.min.js"></Script>

JS Code:

               //Canvas Settings                varImageWidth = 768, ImageHeight= 485; varvertices =[], Indices, boxes= []; varimage, Fragments=[], container= document.getElementById (' container '); Window.onload=function() {image= document.getElementById (' src_img ');                    Triangulate ();                    Makeboxes ();                Makefragments ();                }; functiontriangulate () {varx, y, DX= IMAGEWIDTH/8, Dy= IMAGEHEIGHT/8, offset= 0.5;  for(vari = 0; I <= imagewidth; i + =dx) { for(varj = 0; J <= ImageHeight; J + =dy) {                            if(I && (i!== imagewidth)) x = i + randomrange (-DX * offset, DX *offset); Elsex =i; if(J && (J!== imageheight)) y = j + randomrange (-dy * offset, dy *offset); Elsey =J;                        Vertices.push ([x, y]); }} Indices=delaunay.triangulate (vertices); }                functionmakeboxes () {varP0, p1, p2, xMin, Xmax, ymin, YMax;  for(vari = 0; i < indices.length; i + = 3) {P0= vertices[indices[i + 0]]; P1= vertices[indices[i + 1]]; P2= Vertices[indices[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]); Boxes.push ({x:xmin, y:ymin, W:xmax 
    -XMin, H:ymax-ymin}); }                }                functionmakefragments () {varP0, p1, p2, box, fragment; Tweenmax.set (container, {perspective:500 }); varTl0 =NewTimelinemax ({repeat:-1 });  for(vari = 0; i < indices.length; i + = 3) {P0= vertices[indices[i + 0]]; P1= vertices[indices[i + 1]]; P2= Vertices[indices[i + 2]]; Box= BOXES[I/3]; Fragment=NewFragment (P0, p1, p2, box); varRx = Randomrange ((i% 2) * (1:1); varry = Randomrange ((i% 2) * ((i) -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, Ease:Cubic.easeIn, delay:0.4                        }); Tl1.to (Fragment.canvas, Randomrange (1, 1.2), {rotationx:rx, Rotationy:ry, Z: 250, Alpha:0, ease:Cubic.easeOut});                        Tl0.insert (TL1);                        Fragments.push (fragment);                    Container.appendchild (Fragment.canvas); }                }                functionrandomrange (min, max) {returnMin + (max-min) *Math.random (); } Fragment=function(V0, V1, v2, box) { This. V0 =V0;  This. V1 =v1;  This. V2 =v2;  This. Box =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

View Code

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/6399

HTML5 canvas for picture glass fragment effects