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

也许你见过HTML5图片破碎动画特效，实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组，这个HTML5动画就是利用Canvas的相关特性，实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标，即可让该区域的视频破碎，让后经过一段时间后，破碎的区域又可以重组还原，视觉效果非常棒。

HTML代码

Click video to blow it up!

JavaScript代码

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();<