首页  »   HTML5

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

网友分享于:2015-02-15  浏览:0次
HTML5 canvas画布元素 制作 动态花朵动画

废话不多说 先上代码

<!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变淡一次,不会消失。如下图所示:




相关解决方案

最新解决方案