专业编程基础技术教程

网站首页 > 基础教程 正文

「前端案例 · 程序员的浪漫」烟花特效

ccvgpt 2024-10-30 02:19:59 基础教程 10 ℃

如果文章对你有收获，还请不要吝啬【点赞??收藏?评论?】三连哦，你的鼓励将是我成长助力之一！谢谢！

先看实现效果


「前端案例 · 程序员的浪漫」烟花特效

再看完整代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>烟花特效</title>
		<!-- <link rel="stylesheet" href="styles.css"> -->
		<!-- 
	 说明
	     HTML: 包含一个canvas元素，用于绘制烟花特效。
	     CSS: 设置背景为黑色，并隐藏滚动条。
	     JavaScript: 实现烟花特效的逻辑。
	         Firework 类表示上升的烟花。
	         Particle 类表示爆炸后的烟花粒子。
	         createFirework 函数用于创建爆炸后的粒子。
	         animate 函数用于动画循环。
	         canvas 的点击事件用于触发烟花。
	 这个示例展示了如何使用HTML、CSS和JavaScript创建一个简单的烟花特效。你可以根据需要调整代码，以实现不同的效果。
	 -->
		<style type="text/css">
			body {
				margin: 0;
				overflow: hidden;
				background-color: #000;
			}

			canvas {
				display: block;
			}
		</style>
	</head>
	<body>
		<canvas id="fireworks"></canvas>
		<!-- <script src="script.js"></script> -->
		<script type="text/javascript">
			const canvas = document.getElementById('fireworks');
			const ctx = canvas.getContext('2d');

			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

			const fireworks = [];
			const particles = [];

			class Firework {
				constructor(x, y) {
					this.x = x;
					this.y = y;
					this.radius = 1; // 调整烟花大小
					this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
					this.velocity = {
						x: (Math.random() - 0.5) * 2,
						y: -Math.random() * 3 - 2
					};
					this.gravity = 0.05;
				}

				update() {
					this.velocity.y += this.gravity;
					this.x += this.velocity.x;
					this.y += this.velocity.y;
				}

				draw() {
					ctx.beginPath();
					ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
					ctx.fillStyle = this.color;
					ctx.fill();
					ctx.closePath();
				}
			}

			class Particle {
				constructor(x, y, color) {
					this.x = x;
					this.y = y;
					this.color = color;
					this.radius = Math.random() * 2;
					this.velocity = {
						x: (Math.random() - 0.5) * 5,
						y: (Math.random() - 0.5) * 5
					};
					this.friction = 10.9; // 效果：整个背景天空都会出现闪烁星星（ this.friction=10.9)
					this.alpha = 1;
				}

				update() {
					this.velocity.x *= this.friction;
					this.velocity.y *= this.friction;
					this.x += this.velocity.x;
					this.y += this.velocity.y;
					this.alpha -= 0.01;
				}

				draw() {
					ctx.save();
					ctx.globalAlpha = this.alpha;
					ctx.beginPath();
					ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
					ctx.fillStyle = this.color;
					ctx.fill();
					ctx.closePath();
					ctx.restore();
				}
			}

			function createFirework(x, y) {
				// 烟花爆炸效果面积
				for (let i = 0; i < 60; i++) {
					particles.push(new Particle(x, y, `hsl(${Math.random() * 360}, 100%, 50%)`));
				}
			}

			function animate() {
				requestAnimationFrame(animate);
				ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
				ctx.fillRect(0, 0, canvas.width, canvas.height);

				fireworks.forEach((firework, index) => {
					firework.update();
					firework.draw();
					// ??注意：canvas.height * 0.5 直接取消烟花效果
					// ??注意：canvas.width * 0.8 可以看到烟花爆炸效果（0.9， 1也行)
					if (firework.y <= Math.random() * canvas.height * 0.8) {
						createFirework(firework.x, firework.y);
						fireworks.splice(index, 1);
					}
				});

				particles.forEach((particle, index) => {
					if (particle.alpha <= 0) {
						particles.splice(index, 1);
					} else {
						particle.update();
						particle.draw();
					}
				});
			}

			canvas.addEventListener('click', (event) => {
				const x = event.clientX;
				const y = event.clientY;
				// fireworks.push(new Firework(x, canvas.height)); // 左下角燃放
				fireworks.push(new Firework(canvas.width / 2, canvas.height)); // 中下角燃放
			});

			animate();

			setInterval(function() {
				canvas.click()
			}, 100);
		</script>
	</body>
</html>


如果文章对你有收获，还请不要吝啬【点赞??收藏?评论?】三连哦，你的鼓励将是我成长助力之一！谢谢！

Tags：

猜你喜欢

最近发表
标签列表