canvas鼠标点击散播图片

先看看效果图，在点击的坐标生成4个截图，4个方向散开

http://www.hui12.com/nbin/csdn/canvasCLick/demo.html

https://nbin2008.github.io/demo/canvasClick/index.html

html代码部分

js代码

(function(window,$){
	var proto = {
		init: function(e){
			this.before(e);
			this.setArea();
			this.getXY();
			this.movePoint();
		},
		before: function(e){
			var This = this;
			this.canvas = e.canvas;
			this.points = [];
			var img = new Image;
			img.src = "a4.jpg";
			img.onload = function(){
				This.img = img;
			};
		},
		setArea: function(){
			var canvas = this.canvas;
			canvas.width = $(document).width();
			canvas.height = $(document).height();
		},
		getXY: function(){
			var This = this;
			$(document).click(function(e){
				This.pageX = e.pageX;
				This.pageY = e.pageY;
				This.createPoint();
			});
		},
		createPoint: function(){
			var x = this.pageX;
			var y = this.pageY;
			this.points.push( [[x,y], [x,y], [x,y], [x,y]] );	//上右下左
		},
		movePoint: function(){
			var This = this;
			var myCanvas = this.canvas;
			var myc = myCanvas.getContext('2d');
			var points = this.points;
			setInterval(data,20);
			function data(){
				if( !points.length ){
					return;
				};
				for( var i=points.length-1; i>=0; i-- ){
					var tmp = points[i];
					if( !tmp ){
						continue;
					};
					var sp = Math.round(Math.random()*1+1);
					for( var j=0; j<tmp.length; j++ ){
						switch(j){
							case 0:
								tmp[0][1] -= sp;
								break;
							case 1:
								tmp[1][0] += sp;
								break;
							case 2: 
								tmp[2][1] += sp;
								break;
							case 3:
								tmp[3][0] -= sp;
						}
						if( !tmp[j][2] ){
							var size = Math.round(Math.random()*20 + 60);
							var x = Math.round(Math.random()*This.img.width);
							var y = Math.round(Math.random()*This.img.height);
							tmp[j][2] = function(){
								var canvas = document.createElement("canvas");
									canvas.width = canvas.height = size;
								var mc = canvas.getContext("2d");
									x = x>= (This.img.width-size) ? (This.img.width - size) : x;
									y = y>= (This.img.height-size) ? (This.img.height - size) : y;
								mc.drawImage(This.img, x, y, size, size, 0, 0, size, size);
								return canvas;
							};
						}
					};
					if( tmp[0][1]<=0 && tmp[1][0]>=myCanvas.width && tmp[2][1]>=myCanvas.height && tmp[3][0]<=0 ){
						points.splice(i,1);
					};
				};
			};
			setInterval(draw,20);
			myc.fillRect(0, 0, myCanvas.width, myCanvas.height);
			function draw(){
				if( !points.length ){
					return;
				};
				myc.fillRect(0, 0, myCanvas.width, myCanvas.height);
				$.each(points, function(i, val) {
					$.each(val, function(i2,val2) {
						var x = val2[0];
						var y = val2[1];
						var bg = val2[2]();
						myc.beginPath();
						myc.save();
						myc.moveTo(x, y);
						myc.arc(x, y, bg.width/2, 0, 2*Math.PI);
						myc.clip();
						myc.drawImage(bg, x-bg.width/2, y-bg.height/2, bg.width, bg.height);
						myc.restore();
					});
				});
			};
		}
	};
	function CanvasClick(e){
		this.init(e);
		return this;
	};
	CanvasClick.prototype = proto;
	window.CanvasClick = CanvasClick;
})(window,jQuery);

主要用的drawImage方法成最终效果。

js中生成canvas标签，同样用drawImage取背景图，再作为最终显示canvas的背景图。

数据保存用2次数组

[
[[x, y, fn],[x, y, fn],[x, y, fn],[x, y, fn]],
[[x, y, fn],[x, y, fn],[x, y, fn],[x, y, fn]],
[[x, y, fn],[x, y, fn],[x, y, fn],[x, y, fn]]
]

每次点击4个方向散开，所以4个数据为一个点击时生成的数据，fn为对应坐标的函数，返回绘图所需要的数据。

数据通过定时器控制，绘图根据数据实时生成。

然后就是性能的问题，当四个方向都在屏幕外面，数据删除，当数组里面没有数据时，定时器里面函数直接return。