当前位置：首页 > news >正文

如何用JavaScript实现一个炫酷的烟花动画

news 2025/8/29 2:28:31

实现一个炫酷的烟花动画，我们可以使用 HTML5 的 <canvas> 元素结合 JavaScript 来绘制和控制动画效果。下面是一个完整、简单但视觉效果不错的烟花动画实现。

✅ 实现步骤

创建一个全屏的 <canvas> 元素。
使用 JavaScript 创建烟花粒子系统。
模拟烟花爆炸：从一个点向外发射多个粒子，受重力影响下落并逐渐消失。
添加鼠标点击触发烟花。

🌟 完整代码示例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><title>炫酷烟花动画</title><style>body {margin: 0;overflow: hidden;background: #000;}canvas {display: block;}</style>
</head>
<body><canvas id="fireworks"></canvas><script>const canvas = document.getElementById('fireworks');const ctx = canvas.getContext('2d');// 设置 canvas 全屏canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 烟花集合const fireworks = [];// 颜色数组const colors = ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF','#536DFE', '#40C4FF', '#64FFDA', '#69F0AE','#B2FF59', '#EEFF41', '#FFFF00', '#FFAB00', '#FFD740'];// 粒子类class Particle {constructor(x, y, color) {this.x = x;this.y = y;this.color = color;this.radius = Math.random() * 2 + 1;this.speed = Math.random() * 5 + 2;this.angle = Math.random() * Math.PI * 2;this.vx = Math.cos(this.angle) * this.speed;this.vy = Math.sin(this.angle) * this.speed;this.gravity = 0.05;this.alpha = 1;this.decay = Math.random() * 0.02 + 0.015;}update() {this.vy += this.gravity;this.x += this.vx;this.y += this.vy;this.alpha -= this.decay;}draw() {ctx.save();ctx.globalAlpha = this.alpha;ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fill();ctx.restore();}isFaded() {return this.alpha <= 0;}}// 烟花类class Firework {constructor(x, y) {this.x = x;this.y = y;this.particles = [];this.color = colors[Math.floor(Math.random() * colors.length)];this.particleCount = Math.floor(Math.random() * 50) + 50; // 50-100个粒子// 创建爆炸粒子for (let i = 0; i < this.particleCount; i++) {this.particles.push(new Particle(this.x, this.y, this.color));}}update() {this.particles.forEach(p => {p.update();});// 过滤掉已经消失的粒子this.particles = this.particles.filter(p => !p.isFaded());}draw() {this.particles.forEach(p => {p.draw();});}isDone() {return this.particles.length === 0;}}// 鼠标点击发射烟花canvas.addEventListener('click', (e) => {fireworks.push(new Firework(e.clientX, e.clientY));});// 自动发射烟花（可选）function autoLaunch() {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height * 0.5; // 上半部分fireworks.push(new Firework(x, y));const interval = Math.random() * 1000 + 500; // 0.5~1.5秒setTimeout(autoLaunch, interval);}// 启动自动发射setTimeout(autoLaunch, 1000);// 动画循环function animate() {// 半透明背景制造拖尾效果ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';ctx.fillRect(0, 0, canvas.width, canvas.height);// 更新并绘制所有烟花fireworks.forEach((fw, index) => {fw.update();fw.draw();// 移除已完成的烟花if (fw.isDone()) {fireworks.splice(index, 1);}});requestAnimationFrame(animate);}animate();// 窗口大小调整window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;});</script>
</body>
</html>