HTML5 canvas画布元素制作动态花朵动画

浏览数：138 / 时间：2015年06月09日

废话不多说先上代码

<!doctype>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="text-align:center;">
<canvas id="canvas" width="1300px" height="580px" style="border:2px black solid;">
</canvas>
<script>

var imge = new Image(100 ,100);
imge.src = "hh.png";
var a = new Array();
 a[0] = "2.png";
var cans = document.getElementById("canvas");
var cc = cans.getContext("2d");
cc.save();
var num=0;
function zuobiaox() {
	var x = Math.floor(Math.random()*1200);
	return x;	
}
function zuobiaoy() {
	var y = Math.floor(Math.random()*480);
	return y;	
}

imge.onload = function() {

	chanhua();
	
}
function chanhua() {
	cc.fillstyle="white";
	cc.fillRect(0,0,1300,580);
	//cc.save();
	//一定要清理画布，这样才能清理残留在画布上的像素，还你一个亮白如新的画布~请用纳爱斯
	cc.clearRect(0,0,1300,580);
	var x = zuobiaox();
		var y = zuobiaoy();
		//bian(imge);
		var ww= 70+Math.floor(Math.random()*100);
		
		
		cc.drawImage(imge, x, y,180,180);
		//setInterval("draw(imgdata, x, y,1.3)",1000);
		//ceshi(x,y,13);
		num =0;
		draw(x,y);
		//cc.restore();
		setTimeout("chanhua()",2000);
		
}

function  draw(x,y) {
		
	var img = cc.getImageData(x,y,180,180);	
	for(var i = 0,len = img.data.length; i <len; i+=4)	{
	
		img.data[i+3] = img.data[i+3] * 0.8;
	}
	
	cc.putImageData(img,x,y);
	num++;
	if(num>20)
	{
	//	alert("ok");
	
	
		clearTimeout(st);
		//如果没有return，就会导致之前出现过花的位置都继续保持
		return;
		
	}
	var st = setTimeout("draw("+x+","+y+")",80);	
	
}

//setInterval(img.onload,2000);
</script>
<a href="#"><img src = "hh.png" width="100px"></a>
</body>
</html>

技术分享

函数解释：

chanhua()：利用位图在画布随机位置上绘制花朵。每隔2s调用一次该函数，每次调用都会清理画布

draw():对位图进行特效处理，进行像素处理，利用getImageData()，获取画布上某一区域像素，对该区域像素进行透明度处理。在通过putImageData()将处理好的像素放在原位置。每0.08s调用一次该函数，调用20次，每次调用花的透明度增强，到最后一次时，花几近透明（几近透明的说法是准确的，因为此时花的透明度已达到0.0000...0x了，所以不是完全透明，但是已经看不出来了）。

注意事项：

1.由于出现过花的地方还是有残留像素存在，当相同地方再次出现花朵时，会对新花产生影响，所以在每次生成花朵时要清理一次画布，利用clearRect()函数，宽和高与画布保持一致。

2.一定要在图片加载完成后再去利用图片，img.onload=function() {...}中去使用上述函数。

3.setTimeout("draw("+x+","+y+")",80);一定要给draw()函数加引号，否则马上执行该函数，不再等待0.08s。不要把变量x,y也括在双引号当中，这样会被当成是普通字符串处理。

4.切记每朵花的draw()函数要退出，否则会一直在画布上每2s变淡一次，不会消失。如下图所示：

技术分享