也许你见过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  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;			if(tile.currentX = PAINTRECT.width){
				tile.moveX *= -1;
			}			if(tile.currentY = PAINTRECT.height){
				tile.moveY *= -1;
			}
		}else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){			//contract
			var diffx = (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)  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 setPixel(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}

在线演示源码下载

本文链接：http://www.codeceo.com/article/html5-broken-video.html
本文作者：码农网 – 小峰