2022跨年烟花代码（八）HTML5烟花喷泉

最新推荐文章于 2024-11-05 17:30:57 发布

A雄

最新推荐文章于 2024-11-05 17:30:57 发布

阅读量6.3k

点赞数

分类专栏： 2022跨年烟花代码

本文链接：https://blog.csdn.net/u013343616/article/details/122233650

版权

HTML5 Canvas JavaScript 粒子系统动画特效

关键词由CSDN通过智能技术生成

2022跨年烟花代码专栏收录该内容

10 篇文章 44 订阅

订阅专栏

HTML5烟花喷泉

在这里插入图片描述

html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas烟花喷泉动画特效</title>

<script src="js/jquery-1.8.3.min.js"></script>

<style>
* {
	padding:0;
	margin:0;
}
html,body {
	position:relative;
	width:100%;
	height:100%;
}
body {
	background:#eee;
}
canvas {
	background:black;
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
</style>

</head>
<body>

<canvas id="c"></canvas>

<script>
	;(function(main) {
		main();
	})(function() {

		'use strict';

		var c = document.getElementById('c');
		var ctx = c.getContext('2d');
		var W = c.width = window.innerWidth;
		var H = c.height = window.innerHeight;
		var CX = W / 2;
		var CY = H / 2;

		

		var Particle = function(x, y, vx, vy) {
			this.x = x;
			this.y = y;
			this.ox = x;
			this.oy = y;
			this.vx = vx;
			this.vy = vy;
			this.alpha = Math.random();
			this.color = 25;
			this.lineWidth = Math.random() * 4;
		};

		Particle.prototype = {
			constructor: Particle,
			update: function() {

				this.vx += Math.random() * 0.5 - 0.25;
				this.vy += 0.8;
				this.vy *= 0.98;
				this.alpha *= 0.95;

				this.ox = this.x;
				this.oy = this.y;
				this.x += this.vx;
				this.y += this.vy;

				if(this.y < 0 || this.y > H || this.alpha < 0.1) {
					this.vx = Math.random() * 2 - 1;
					this.vy = Math.random() * -50;
					this.ox = this.x = CX;
					this.oy = this.y = H;
					this.alpha = Math.random();
				}

			},
			render: function(ctx) {
				ctx.save();
				ctx.globalAlpha = 0.98;
				ctx.lineWidth = this.lineWidth;
				ctx.strokeStyle = 'hsla(' + (this.color) + ', 100%, 50%, ' + this.alpha + ')';
				ctx.beginPath();
				ctx.moveTo(this.ox, this.oy);
				ctx.lineTo(this.x, this.y);
				ctx.stroke();
				ctx.restore();
			}
		};



		var particleCount = 500;
		var particle = null;
		var particles = [];
		var interval = 0;

		for(var i = 0; i < 250; i++) {
			particle = new Particle(
				CX,
				H,
				Math.random() * 2 - 1,
				Math.random() * -50
			);			
			particles.push(particle);			
		}


		requestAnimationFrame(function loop() {
			requestAnimationFrame(loop);

			ctx.globalCompositeOperation = 'source-over';
			ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
			ctx.fillRect(0, 0, W, H);

			ctx.globalCompositeOperation = 'lighter';

			if(particles.length < particleCount) {
				particle = new Particle(
					CX,
					H,
					Math.random() * 2 - 1,
					Math.random() * -50
				);			
				particles.push(particle);
			} 

			for(var i = 0, len = particles.length; i < len; i++) {
				particle = particles[i];
				particle.update();
				particle.render(ctx);				
			}


		});
		
	});
</script>

</body>
</html>