Canvas 与 Web Audio API 实现交互式烟花动画

支持添加到 iOS 主屏幕，使用半透明状态栏适配刘海屏，内联 PWA manifest 减少外部依赖。

3. SVG 图标定义

使用 SVG symbol 定义可复用图标，通过 <use> 引用。矢量图标优势在于可缩放且体积小。

4. Canvas 画布容器

采用双层 Canvas 设计：

5. 控制面板与设置

提供暂停播放、快门模式切换及设置菜单。设置项包括烟花类型、大小、自动发射、终场模式等。iOS Safari 要求用户交互后才能播放音频，因此增加了首次交互提示引导。

CSS 样式部分

1. 全局样式与触摸优化

移除点击高亮，禁用长按菜单和文字选择，禁止双击缩放。安全区域 padding 确保内容不被刘海屏遮挡。

2. 混合模式

Canvas 使用 mix-blend-mode: lighten。在黑色背景上，亮色粒子叠加会产生更亮的效果，模拟真实光效。

3. 动画过渡

使用 opacity 和 visibility 组合实现平滑显示/隐藏，避免点击穿透问题。

JavaScript 核心模块

1. FireworkSound 音效模块

初始化 Web Audio API，处理 iOS 音频解锁。核心是生成白噪声并经过低通滤波器模拟爆炸闷响，配合音量包络实现快速起音和缓慢衰减。

const FireworkSound = {
    ctx: null,
    enabled: true,
    soundType: 'realistic',
    isUnlocked: false,
    init() {
        this.ctx = new (window.AudioContext || window.webkitAudioContext)();
    },
    unlock() {
        if (this.isUnlocked) return true;
        if (this.ctx.state === 'suspended') {
            this.ctx.resume();
        }
        const buffer = this.ctx.createBuffer(1, 1, 22050);
        const source = this.ctx.createBufferSource();
        source.buffer = buffer;
        source.connect(this.ctx.destination);
        source.start(0);
        this.isUnlocked = true;
    },
    playRealisticBurst(size = 1) {
        // 生成白噪声缓冲区
        const duration = 0.6 + size * 0.2;
        const bufferSize = this.ctx.sampleRate * duration;
        const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
        const data = buffer.getChannelData(0);
        for (let i = 0; i < bufferSize; i++) {
            const t = i / bufferSize;
            const noise = Math.random() * 2 - 1;
            const envelope = Math.pow(1 - t, 1.5);
            data[i] = noise * envelope;
        }
        // 创建低通滤波器模拟爆炸闷响
        const filter = this.ctx.createBiquadFilter();
        filter.type = 'lowpass';
        filter.frequency.setValueAtTime(3000 * size, this.ctx.currentTime);
        filter.frequency.exponentialRampToValueAtTime(200, this.ctx.currentTime + duration * 0.7);
        // 连接节点并播放
        const noise = this.ctx.createBufferSource();
        noise.buffer = buffer;
        noise.connect(filter);
        filter.connect(this.ctx.destination);
        noise.start(this.ctx.currentTime);
    }
};

支持多种声音类型，如真实、电影感、经典、复古等。

2. Store 状态管理

使用发布 - 订阅模式管理应用状态。配置变更时通知所有订阅者更新 DOM，并持久化到 localStorage。

3. Shell 烟花类

负责计算发射位置和目标高度，模拟抛物线运动。创建彗星上升火球，死亡回调触发爆炸。爆炸时根据半径计算速度，创建粒子弧分布。

4. Star 星星粒子与 Spark 火花粒子

采用对象池模式复用粒子对象，避免频繁创建销毁带来的 GC 压力。Star 粒子较大，寿命较长；Spark 粒子较小，作为闪光效果，寿命较短。

5. 渲染循环

每一帧更新全局状态，计算物理参数（空气阻力、重力）。遍历所有颜色的活跃粒子进行物理更新，保存上一帧位置用于绘制轨迹。最后调用渲染函数。

6. 渲染函数

更新天空颜色，设置变换矩阵。利用渐变黑色覆盖实现拖尾效果，使用 lighten 混合模式绘制粒子。绘制爆炸闪光和速度条，重置变换矩阵。

7. 天空颜色计算

根据活跃星星的数量和颜色累加亮度，非线性映射模拟人眼感知，平滑过渡应用到背景色。

用户交互

1. 点击发射

监听 Pointer Events，区分顶部按钮区域和画布区域。点击画布发射烟花，支持调整发射速度。

2. 键盘快捷键

支持 P 键暂停，O 键打开菜单，ESC 关闭菜单。

3. 自动发射序列

实现随机单发、小型连发、双发、三发等多种序列。终场模式下快速连续发射，营造高潮氛围。

性能优化要点

iOS 适配

1. Meta 标签优化

视口适配刘海屏，禁用电话号码识别，PWA Manifest 支持。

2. CSS 触摸优化

移除点击高亮，禁用橡皮筋效果，适配安全区域。

3. Web Audio 解锁

iOS 要求必须在用户交互中创建并播放音频。通过播放静音缓冲区解锁 AudioContext。

4. 手势防护

禁用缩放手势，防止双击缩放，确保触摸响应灵敏。

文件依赖

主要依赖全屏 API 兼容库、Canvas 舞台管理库及数学工具函数。本地仅需 style.css 额外样式。

总结

该项目展示了如何利用现代 Web 技术构建高性能视觉特效。双层 Canvas 渲染结合 Web Audio API 实时合成，提供了丰富的交互体验。物理引擎模拟真实重力与阻力，对象池优化内存占用，完善的 iOS 适配确保了移动端兼容性。适合前端开发者学习粒子系统与音频编程。