1. 全屏烟花网页的实现原理

全屏烟花效果本质上是通过HTML5的Canvas元素结合JavaScript实现的动态图形渲染。Canvas提供了像素级的绘图能力，而JavaScript则负责控制烟花的生成、运动轨迹和爆炸效果。

1.1 核心技术组件

实现一个完整的全屏烟花效果需要以下几个核心组件：

1. Canvas画布：作为烟花展示的载体
2. 粒子系统：模拟烟花爆炸后的粒子效果
3. 物理引擎：控制粒子的运动轨迹（重力、阻力等）
4. 颜色生成器：随机产生多彩的烟花颜色
5. 事件监听：响应用户交互（点击、移动等）

<canvas id="fireworks"></canvas> <script> const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); </script>

1.2 物理模型设计

烟花效果主要模拟了两种物理现象：

1. 抛物线运动：烟花弹从发射到最高点的轨迹
2. 粒子扩散：烟花爆炸后粒子的随机散开

每个粒子都需要跟踪以下属性：

• 当前位置(x,y)
• 速度(vx,vy)
• 半径
• 颜色
• 生命周期

2. 完整实现步骤

2.1 基础HTML结构

首先创建基本的HTML框架：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全屏烟花效果</title> <style> body { margin: 0; overflow: hidden; background-color: #000; } canvas { display: block; } </style> </head> <body> <canvas id="fireworks"></canvas> <script src="fireworks.js"></script> </body> </html>

2.2 JavaScript核心逻辑

创建fireworks.js文件，实现主要逻辑：

// 初始化画布 const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); // 设置画布为全屏 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 烟花粒子类 class Particle { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.radius = Math.random() * 2 + 1; this.velocity = { x: (Math.random() - 0.5) * 8, y: (Math.random() - 0.5) * 8 }; this.alpha = 1; this.decay = Math.random() * 0.015 + 0.01; } 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(); } update() { this.velocity.y += 0.05; // 重力 this.x += this.velocity.x; this.y += this.velocity.y; this.alpha -= this.decay; this.draw(); return this.alpha > 0; } } // 烟花类 class Firework { constructor(x, y, targetX, targetY, color) { this.x = x; this.y = y; this.targetX = targetX; this.targetY = targetY; this.color = color; this.particles = []; this.speed = 3; this.angle = Math.atan2(targetY - y, targetX - x); this.velocity = { x: Math.cos(this.angle) * this.speed, y: Math.sin(this.angle) * this.speed }; this.trail = []; } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fill(); } update() { this.trail.push({ x: this.x, y: this.y }); if (this.trail.length > 10) { this.trail.shift(); } this.x += this.velocity.x; this.y += this.velocity.y; // 绘制尾迹 for (let i = 0; i < this.trail.length; i++) { const point = this.trail[i]; ctx.fillStyle = `${this.color}${Math.floor(i / this.trail.length * 255).toString(16).padStart(2, '0')}`; ctx.beginPath(); ctx.arc(point.x, point.y, 1, 0, Math.PI * 2); ctx.fill(); } this.draw(); // 检查是否到达目标位置 const distance = Math.hypot(this.targetX - this.x, this.targetY - this.y); if (distance < 5) { this.explode(); return false; } return true; } explode() { const particleCount = 150; for (let i = 0; i < particleCount; i++) { this.particles.push(new Particle(this.x, this.y, this.color)); } } } // 主循环 let fireworks = []; let particles = []; function animate() { requestAnimationFrame(animate); ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 随机生成烟花 if (Math.random() < 0.03) { const x = Math.random() * canvas.width; const y = canvas.height; const targetX = Math.random() * canvas.width; const targetY = Math.random() * canvas.height * 0.6; const hue = Math.floor(Math.random() * 360); const color = `hsl(${hue}, 100%, 50%)`; fireworks.push(new Firework(x, y, targetX, targetY, color)); } // 更新烟花 for (let i = fireworks.length - 1; i >= 0; i--) { if (!fireworks[i].update()) { fireworks.splice(i, 1); } } // 更新粒子 for (let i = particles.length - 1; i >= 0; i--) { if (!particles[i].update()) { particles.splice(i, 1); } } } // 响应点击事件 canvas.addEventListener('click', (e) => { const x = Math.random() * canvas.width; const y = canvas.height; const targetX = e.clientX; const targetY = e.clientY; const hue = Math.floor(Math.random() * 360); const color = `hsl(${hue}, 100%, 50%)`; fireworks.push(new Firework(x, y, targetX, targetY, color)); }); // 响应窗口大小变化 window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // 启动动画 animate();

3. 性能优化技巧

3.1 减少重绘区域

使用clearRect()代替全屏重绘，只清除需要更新的区域：

function animate() { requestAnimationFrame(animate); // 改为局部清除 ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; particles.forEach(p => { ctx.fillRect(p.x - p.radius, p.y - p.radius, p.radius * 2, p.radius * 2); }); // ...其余代码 }

3.2 使用requestAnimationFrame

确保使用requestAnimationFrame而不是setTimeout或setInterval来实现动画循环，这样可以获得更好的性能。

3.3 粒子数量控制

根据屏幕尺寸和设备性能动态调整粒子数量：

const particleCount = Math.min(150, window.innerWidth * window.innerHeight / 1000);

4. 高级效果扩展

4.1 添加音效

为烟花添加爆炸音效：

// 预加载音效 const audioContext = new (window.AudioContext || window.webkitAudioContext)(); let explosionSound; fetch('explosion.mp3') .then(response => response.arrayBuffer()) .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer)) .then(audioBuffer => { explosionSound = audioBuffer; }); // 在explode方法中添加 function playExplosionSound() { const source = audioContext.createBufferSource(); source.buffer = explosionSound; source.connect(audioContext.destination); source.start(); }

4.2 3D效果

通过添加z轴坐标模拟3D效果：

class Particle3D extends Particle { constructor(x, y, z, color) { super(x, y, color); this.z = z; } draw() { const scale = 1 / (1 + this.z * 0.1); ctx.save(); ctx.globalAlpha = this.alpha; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc( this.x * scale + canvas.width * (1 - scale) / 2, this.y * scale + canvas.height * (1 - scale) / 2, this.radius * scale, 0, Math.PI * 2 ); ctx.fill(); ctx.restore(); } }

4.3 烟花形状控制

通过修改粒子发射模式创建不同形状的烟花：

function createShapeParticles(x, y, color, shape) { const particles = []; const count = 100; for (let i = 0; i < count; i++) { let vx, vy; const angle = (i / count) * Math.PI * 2; switch(shape) { case 'circle': vx = Math.cos(angle) * 5; vy = Math.sin(angle) * 5; break; case 'heart': const t = angle; vx = 16 * Math.pow(Math.sin(t), 3); vy = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)); break; // 其他形状... } particles.push({ x, y, vx, vy, color, alpha: 1, decay: 0.01 }); } return particles; }

5. 常见问题与解决方案

5.1 性能问题

问题现象：动画卡顿，帧率下降

解决方案：

1. 减少同时显示的粒子数量
2. 使用window.requestAnimationFrame代替定时器
3. 简化粒子绘制逻辑（如使用方形代替圆形）
4. 实现对象池模式重用粒子对象

5.2 跨浏览器兼容性

问题现象：在某些浏览器中效果不正常

解决方案：

1. 添加浏览器前缀检测
2. 提供降级方案
3. 使用特性检测而非浏览器检测

// 检测Canvas支持 if (!canvas.getContext) { alert('您的浏览器不支持Canvas，无法显示烟花效果'); } // 检测requestAnimationFrame window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { setTimeout(callback, 1000/60); };

5.3 移动端适配

问题现象：触摸事件不灵敏，性能差

解决方案：

1. 添加触摸事件支持
2. 根据设备性能调整粒子数量
3. 添加防抖处理防止过度触发

// 添加触摸事件 let lastTouchTime = 0; canvas.addEventListener('touchstart', (e) => { const now = Date.now(); if (now - lastTouchTime < 300) return; // 防抖 lastTouchTime = now; const touch = e.touches[0]; const x = Math.random() * canvas.width; const y = canvas.height; const hue = Math.floor(Math.random() * 360); const color = `hsl(${hue}, 100%, 50%)`; fireworks.push(new Firework(x, y, touch.clientX, touch.clientY, color)); e.preventDefault(); }, { passive: false });

6. 实际应用场景

6.1 节日庆典页面

全屏烟花效果特别适合用于节日主题的网页，如春节、元旦、国庆等。可以配合节日主题调整烟花颜色和形状。

6.2 产品发布会

在产品发布或重要公告页面添加烟花效果，可以增强庆祝氛围，吸引用户注意力。

6.3 个人作品集

作为前端开发者，将这种视觉效果集成到个人作品集中，可以直观展示技术能力。

6.4 互动营销活动

结合用户交互，让用户通过点击或滑动触发烟花效果，增加参与感和趣味性。

7. 进阶开发建议

7.1 使用WebGL提升性能

对于更复杂的3D烟花效果或大量粒子场景，可以考虑使用Three.js等WebGL库：

import * as THREE from 'three'; // 初始化Three.js场景 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建烟花粒子 const particleGeometry = new THREE.BufferGeometry(); const particleMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1, transparent: true, opacity: 0.8 }); const particles = new THREE.Points(particleGeometry, particleMaterial); scene.add(particles);

7.2 添加物理引擎

集成物理引擎如matter.js或cannon.js可以实现更真实的物理效果：

// 使用matter.js示例 const engine = Matter.Engine.create(); const world = engine.world; // 创建物理粒子 function createPhysicsParticle(x, y) { return Matter.Bodies.circle(x, y, 5, { restitution: 0.8, friction: 0.01, density: 0.01 }); }

7.3 响应式设计优化

确保烟花效果在不同设备上都能良好显示：

function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 调整粒子数量 maxParticles = Math.floor(window.innerWidth * window.innerHeight / 1000); } window.addEventListener('resize', debounce(resizeCanvas, 200)); function debounce(func, wait) { let timeout; return function() { clearTimeout(timeout); timeout = setTimeout(func, wait); }; }

8. 代码维护与扩展建议

8.1 模块化组织代码

将代码拆分为多个模块，提高可维护性：

/fireworks ├── index.html ├── js/ │ ├── main.js # 入口文件 │ ├── particle.js # 粒子类 │ ├── firework.js # 烟花类 │ ├── utils.js # 工具函数 │ └── effects.js # 特效扩展 └── css/ └── style.css # 样式文件

8.2 添加配置选项

提供可配置参数，方便调整效果：

const config = { particleCount: 150, gravity: 0.05, decayRate: 0.01, colors: ['#ff0000', '#00ff00', '#0000ff'], shapes: ['circle', 'heart', 'star'], autoFire: true, autoFireDelay: 1000 };

8.3 添加性能监控

集成性能监控，帮助优化：

let lastTime = 0; let frameCount = 0; let fps = 0; function monitorPerformance(now) { frameCount++; if (now - lastTime >= 1000) { fps = frameCount; frameCount = 0; lastTime = now; console.log(`FPS: ${fps}`); } } function animate(now) { monitorPerformance(now); // ...原有动画代码 requestAnimationFrame(animate); }