An image glass fragment effect implemented by html5 canvas,

An image glass fragment effect implemented by html5 canvas,
Html5 canvas implements the image glass fragment effect. The image is displayed in the form of glass fragment on the interface, and the effect is similar to the effect of glass fragment. The effect is very good, for more information, see the image glass fragment special effect of html5 canvas. The image appears in the form of a glass fragment on the interface, and then the effect of the broken glass appears gradually. As follows:

 

Source code download

Html code:


The Code is as follows:

<Div id = "container" style = "-webkit-perspective: 500px;">
<Div>
<Script src = "Dirichlet. js"> </script>
<Script src = "TweenMax. min. js"> </script>


Js Code:

The Code is as follows:
// Canvas settings
Var imageWidth = 768,
ImageHeight = 485;
Var vertices = [],
Indices,
Boxes = [];
Var image,
Fragments = [],
Container = document. getElementById ('Container ');
Window. onload = function (){
Image = document. getElementById ('src _ img ');
Triangulate ();
MakeBoxes ();
MakeFragments ();
};
Function triangulate (){
Var x,
Y,
Dx = imageWidth/8,
Dy = imageHeight/8,
Offset = 0.5;
For (var I = 0; I <= imageWidth; I + = dx ){
For (var j = 0; j <= imageHeight; j + = dy ){
If (I & (I! = ImageWidth) x = I + randomRange (-dx * offset, dx * offset );
Else x = I;
If (j & (j! = ImageHeight) y = j + randomRange (-dy * offset, dy * offset );
Else y = j;
Vertices. push ([x, y]);
}
}
Indices = maid (vertices );
}
Function makeBoxes (){
Var p0, p1, p2,
XMin, xMax,
YMin, yMax;
For (var I = 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
});
}
}
Function makeFragments (){
Var p0, p1, p2,
Box,
Fragment;
TweenMax. set (container, {perspective: 500 });
Var tl0 = new TimelineMax ({repeat:-1 });
For (var I = 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 = new Fragment (p0, p1, p2, box );
Var rx = randomRange (30, 60) * (I % 2 )? 1:-1 );
Var ry = randomRange (30, 60) * (I % 2 )? -1: 1 );
Var tl1 = new TimelineMax ();
TweenMax. set (fragment. canvas ,{
Y: box. y-1000
});
Tl1.to (fragment. canvas, randomRange (0.9, 1.1 ),{
Y: box. y,
Timeout: Back. easeOut
});
Tl1.to (fragment. canvas, 0.5 ,{
Z:-100,
Memory: Cubic. easeIn,
Delay: 0.4
});
Tl1.to (fragment. canvas, randomRange (1, 1.2 ),{
RotationX: rx,
RotationY: ry,
Z: 250,
Alpha: 0,
Memory: Cubic. easeOut
});
Tl0.insert (tl1 );
Fragments. push (fragment );
Container. appendChild (fragment. canvas );
}
}
Function randomRange (min, max ){
Return min + (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