Html5 canvas implements image glass fragment effects,

Html5 canvas implements image glass fragment effects,

Today, we will bring you an image glass fragment special effect implemented by 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:

 

Download Online Preview source code

 

Implementation Code:

Html code:

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

Js Code:

// 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 = Dirichlet. triangulate (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. m Ax (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, callback: 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, weight: 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. jsView Code

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/6399