JAVASCRIPT+HTML5 Canvas to realize image fragmentation and reorganization animation special effects _javascript Skills

Maybe you've seen HTML5 pictures broken animation effects, the principle of implementation is quite simple. But you should not have seen the video can also be broken into a reorganization, this HTML5 animation is to use the relevant characteristics of canvas, to achieve the click of the mouse to make video fragmentation reorganization effect. Click the mouse in the video area, you can let the video of the area broken, after a period of time, the broken area can be reconstructed and restored, the visual effect is very good.

HTML code

<div style= "Display:none" >
 <video id= "Sourcevid" autoplay= "true" loop= "true" >
  <source src= " Bigbuckbunny_640x360.mp4 "type=" Video/mp4 "/> <source src=" BIGBUCKBUNNY_640X360.OGV "type=" Video/ogg "
  / >
 </video>
 <canvas id= "sourcecopy" width= "640" height= "360" ></canvas>
</div >
<div>
<center>
 <div style= "Z-index:1;position:relative;text-align:center; font-size:16px;font-weight:bold;width:1000px;top:60px; " >click video to blow it up!</div> <canvas id= "Output" width= "1000" height= "onmousedown=" Dropbomb
 ( event, this) "style=" border:0 none ">    </canvas>
</center>
</div>

JavaScript code

var video;
var copy;
var Copycanvas;

var draw;
var tile_width = 32;
var tile_height = 24;
var tile_center_width = 16;
var tile_center_height = 12;
var sourcerect = {x:0, y:0, width:0, height:0};

var paintrect = {x:0, y:0, width:1000, height:600};
 function init () {video = document.getElementById (' Sourcevid ');
 Copycanvas = document.getElementById (' sourcecopy ');
 copy = Copycanvas.getcontext (' 2d ');
 var Outputcanvas = document.getElementById (' output ');
 Draw = Outputcanvas.getcontext (' 2d ');
SetInterval ("Processframe ()", 33);
 function Createtiles () {var OffsetX = tile_center_width+ (paintrect.width-sourcerect.width)/2;
 var OffsetY = tile_center_height+ (paintrect.height-sourcerect.height)/2;
 var y=0;
 while (Y < sourcerect.height) {var x=0;
  while (x < sourcerect.width) {var tile = new tile ();
  Tile.videox = x;
  Tile.videoy = y;
  Tile.originx = offsetx+x;
  Tile.originy = Offsety+y;
  Tile.currentx = Tile.originx;
  Tile.currenty = Tile.originy;
  Tiles.push (tile); x+=Tile_width;
 } y+=tile_height;
} var RAD = math.pi/180;
var randomjump = false;
var tiles = [];
var debug = false; function Processframe () {if (!isnan (video.duration)) {if (Sourcerect.width = = 0) {Sourcerect = {X:0,y:0,width:video.vide
  Owidth,height:video.videoheight};
 Createtiles ();
  }//this is to keep my sanity while developing if (randomjump) {randomjump = false;
 Video.currenttime = Math.random () *video.duration;
 }//loop if (video.currenttime = = video.duration) {video.currenttime = 0;
 } var debugstr = "";
 Copy Tiles copy.drawimage (video, 0, 0);

 Draw.clearrect (Paintrect.x, paintrect.y,paintrect.width,paintrect.height);
 for (var i=0 i<tiles.length; i++) {var tile = tiles[i];
  if (Tile.force > 0.0001) {//expand Tile.movex *= tile.force;
  Tile.movey *= Tile.force;
  Tile.moverotation *= Tile.force;
  Tile.currentx + = Tile.movex;
  Tile.currenty + = Tile.movey;
  Tile.rotation + = tile.moverotation;
  Tile.rotation%= 360;
  Tile.force *= 0.9; IfTile.currentx <= 0 | |
  Tile.currentx >= paintrect.width) {Tile.movex *=-1;
  } if (tile.currenty <= 0 | | | tile.currenty >= paintrect.height) {Tile.movey *=-1; }}else if (tile.rotation!= 0 | | tile.currentx!= Tile.originx | | tile.currenty!= tile.originy) {//contract var diff
  x = (tile.originx-tile.currentx) *0.2;
  var diffy = (tile.originy-tile.currenty) *0.2;

  var Diffrot = (0-tile.rotation) *0.2;
  if (Math.Abs (DIFFX) < 0.5) {tile.currentx = Tile.originx;
  }else{Tile.currentx + = DIFFX;
  } if (Math.Abs (Diffy) < 0.5) {tile.currenty = Tile.originy;
  }else{Tile.currenty + = Diffy;
  } if (Math.Abs (Diffrot) < 0.5) {tile.rotation = 0;
  }else{tile.rotation + = Diffrot;
 }}else{tile.force = 0;
 } draw.save ();
 Draw.translate (Tile.currentx, Tile.currenty);
 Draw.rotate (Tile.rotation*rad); Draw.drawimage (Copycanvas, Tile.videox, Tile.videoy, Tile_width, Tile_height,-tile_center_width,-TILE_CENTER_
 HEIGHT, Tile_width, tile_height); DrAw.restore ();
 } if (Debug) {debug = false;
 document.getElementById (' Trace '). InnerHTML = Debugstr;

 } function explode (x, y) {for (var i=0; i<tiles.length; i++) {var tile = tiles[i];
 var xdiff = tile.currentx-x;
 var ydiff = tile.currenty-y;

 var dist = math.sqrt (Xdiff*xdiff + Ydiff*ydiff);
 var randrange = 220+ (Math.random () *30);
 var range = Randrange-dist;
 var force = 3* (Range/randrange);
  if (Force > Tile.force) {tile.force = force;
  var radians = math.atan2 (Ydiff, Xdiff);
  Tile.movex = Math.Cos (radians);
  Tile.movey = Math.sin (radians);
 Tile.moverotation = 0.5-math.random ();
 } tiles.sort (Zindexsort);
Processframe ();

function Zindexsort (A, B) {return (a.force-b.force);}
 function Dropbomb (evt, obj) {var posx = 0;
 var posy = 0; var e = evt | |
 window.event;
 if (E.pagex | | e.pagey) {POSX = E.pagex;
 Posy = E.pagey;
 }else if (E.clientx | | e.clienty) {POSX = E.clientx + Document.body.scrollLeft + document.documentElement.scrollLeft; Posy = E.clieNty + Document.body.scrollTop + document.documentElement.scrollTop;
 var canvasx = Posx-obj.offsetleft;
 var canvasy = posy-obj.offsettop;
Explode (canvasx, canvasy);
 function Tile () {this.originx = 0;
 This.originy = 0;
 This.currentx = 0;
 This.currenty = 0;
 this.rotation = 0;
 This.force = 0;
 this.z = 0;
 this.movex= 0;
 this.movey= 0;

 this.moverotation = 0;
 This.videox = 0;
This.videoy = 0;
 }/* GetPixel return pixel object {R,g,b,a}/function GetPixel (ImageData, x, y) {var data = Imagedata.data;
 var pos = (x + y * imagedata.width) * 4; return {R:data[pos], g:data[pos+1], b:data[pos+2], a:data[pos+3]}}/* SetPixel set Pixel object {R,g,b,a}/function S
 Etpixel (ImageData, x, y, pixel) {var data = Imagedata.data;
 var pos = (x + y * imagedata.width) * 4;
 Data[pos] = PIXEL.R;
 DATA[POS+1] = PIXEL.G;
 DATA[POS+2] = pixel.b;
DATA[POS+3] = PIXEL.A; }/* Copypixel faster then using Getpixel/setpixel Combo/function Copypixel (simagedata, SX, SY, Dimagedata,DX, dy) {var spos = (sx + sy * simagedata.width) * 4;
 var dpos = (dx + dy * dimagedata.width) * 4;   Dimagedata.data[dpos] = Simagedata.data[spos]; R dimagedata.data[dpos+1] = simagedata.data[spos+1]; G dimagedata.data[dpos+2] = simagedata.data[spos+2]; B dimagedata.data[dpos+3] = simagedata.data[spos+3];
 A} </script>

I hope this article will help you learn about JavaScript programming.