某烟火(canvas)

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

<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>
Avatar_small
Maruti Insurance Ren 说:
2022年7月31日 14:06

We all know how trustworthy Maruti service is and there are millions of cars that are sold by this company not just in India but all across the world which makes them more reliable. At the same time, as a company they also have their own Insurance for every car they sell and put on the road for travel. Maruti Insurance Renewal Even if you don’t have a car from their company you can still buy Insurance policy for your vehicle. It is towards Maruti Insurance Renewal in online from Brooking service providing no claim bonus on policies. All good things come to an end at one point. It is the same for Insurance for any vehicle that you buy from any vendor or Insurance service provider.

Avatar_small
WiFi Speed Test 说:
2023年2月04日 14:07

Internet is something we all use every second of our lives now with WiFi gadgets, where you can test the speed at any time, and where notifications, texts, and emails stream down like rain, we should always have the best Internet connection with us. WiFi Speed Test We've talked a lot about the importance of having a decent Internet connection, but now it's time for you to take action and see whether your Internet is what it claims to be. We will use SpeedTest by Ooakla to check your WiFi speed, which is equivalent to your Internet connection speed.

Avatar_small
jnanabhumiap.in 说:
2024年1月05日 00:54

JNANABHUMI AP provides a CBSE syllabus for all classes for the academic year 2024 has been designed as per the guidelines of the CBSE Board. The syllabus offers a conceptual background and lays the groundwork for the Class 10 Board exams. jnanabhumiap.in By visiting the page, students will find the downloadable pdf of the reduced CBSE 10th Syllabus along with the deleted portion of the syllabus for each subject. So, students are advised to prepare for the exam, as per the syllabus mentioned here.


登录 *


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