js 图片打碎_JavaScript+html5 canvas实现图片破碎重组动画特效

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,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