某烟火(canvas)

烁灵 posted @ 2015年7月13日 17:50 in 前端 with tags html5 Javascript , 643 阅读

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
	</head>
	<body style="margin:0;" onload="start();">
		<canvas id="_canvas"></canvas>		
	</body>
	
		<script>
			// 烟火
			function Fire(x, y, life, directionX, directionY) {
				this.x = x;
				this.y = y;
				this.life = life;
				this.frames = 0;	// 帧数计时
				this.directionX = directionX;
				this.directionY = directionY;
				this.color = "rgb(" + Math.floor(Math.random() * 128 + 128) + "," + Math.floor(Math.random() * 128 + 128) + "," + Math.floor(Math.random() * 128 + 128) +")";
			}
			Fire.prototype = {
				// 行进
				move : function() {
					this.x += this.directionX;
					this.y += this.directionY;
					this.directionX *= 0.94;
					this.directionY *= 0.94;
					this.directionY += 0.3;
					this.frames += 1;
				},
				// 失效
				powerOut : function() {
					return this.frames == this.life;
				},
				x : function() {
					return this.x;
				},
				y : function() {
					return this.y;
				},
				color : function() {
					return this.color;
				}
			}
			// 烟花
			function FirePackage(x, y) {
				this.x = x;
				this.y = y;
				this.fires = new Array();
			}
			FirePackage.prototype = {
				createFires : function(num) {
					// 添加烟火
					if (!num) {
						num = Math.floor(Math.random() * 50) + 10;
					}
					for (var i = 0; i < num; i += 1) {
						var life = Math.floor(Math.random() * 80) + 40;
						this.fires[i] = new Fire(this.x, this.y, life, Math.random() * 20 * (Math.random() * 10 >=5 ? (-1) : 1), Math.random() * 20 * (Math.random() * 10 >= 5 ? (-1) : 1));
					}
				},
				boom : function(ctx) {
					var powerOutCount = 0;
					if (this.powerOut()) {
						return;
					}
					for (var i = 0; i < this.fires.length; i += 1) {
						var fire = this.fires[i];
						if (!fire.powerOut()) {
							fire.move();
							ctx.fillStyle= fire.color;
							ctx.beginPath();
							//console.clear();
							//console.log("fire.x :" + fire.x, "fire.y:" + fire.y);
							//console.log("fire.color :" + fire.color);
							ctx.arc(fire.x,fire.y,5,0,Math.PI*2,true);
							ctx.closePath();
							ctx.fill();
						} else {						
							powerOutCount += 1;
						}
					}
					if (powerOutCount == this.fires.length) {
						this.powerOutFlag = true;
					}
				},
				powerOut : function() {
					return this.powerOutFlag ? true : false;
				}
			}
		</script>
		<script>
		var canvas = document.getElementById('_canvas');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		
		var ctx=canvas.getContext('2d');
		var timeInterval;
		window.onresize = function() {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		}
		var firePackages = new Array();
		function createFirePackage(x, y) {
			var firePackage = new FirePackage(x, y);
			firePackage.createFires();
			firePackages.push(firePackage);
		}
		var pushInterval;
		var pushFire = function() {
			clearInterval(pushInterval);
			createFirePackage(Math.random() * canvas.width , Math.random() * canvas.height);
			pushInterval = setInterval(pushFire, Math.random() * 1000 + 100);
		}
		function start() {
			var loop = function() {
				if (firePackages.length == 0) {
					createFirePackage(Math.random() * canvas.width , Math.random() * canvas.height);
				}
				var powerOutCount = 0;
				var border = 320;
				for (var i = 0; i < firePackages.length; i += 1) {
					var firePackage = firePackages[i];
					ctx.fillStyle="rgba(0,0,0,0.1)";
					ctx.fillRect(0,0,canvas.width,canvas.height);
					if  (!firePackage.powerOut()) {
						firePackage.boom(ctx);
					} else {
						firePackages[i] = firePackages[firePackages.length - 1];
						firePackages.pop();
					}
				}
				var border = 360;
				ctx.fillStyle="rgba(255,0,0,1)";
				ctx.font = border + "px 黑体";
				ctx.fillText("囍",(canvas.width - border) / 2, border);
			}
			timeInterval = setInterval(loop, 10);
			pushFire();
			loop();
		}
		</script>
</html>

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter