首页分享七夕快到了，看看Trae老师怎么实现浪漫的烟花

七夕快到了，看看Trae老师怎么实现浪漫的烟花

来源：花匠小妙招时间：2026-03-31 14:02

前言

时间过得真快，又是一年七夕情人节，想不想给女朋友一个浪漫的惊喜呢？Trae老师为你打造了一个炫酷的烟花特效，让你的情人节更加浪漫！

先向Trae提问，让Trae帮我们打造一个能打动女孩子的炫酷烟花～

哦豁还有三个按钮，Trae还挺有浪漫的艺术细菌嘛，我们来看看Trae老师给我们带来啥惊喜

第一版的效果

自动随机烟花，浪漫啊，Trae老师

心形烟花，还是Trae老师会玩

玫瑰烟花效果也

Trae 核心代码解读

1. 烟花系统架构

// 烟花系统核心类 class Fireworks { constructor() { this.canvas = document.getElementById('fireworks'); this.ctx = this.canvas.getContext('2d'); this.particles = []; // 粒子数组 this.fireworks = []; // 烟花数组 this.autoMode = false; // 自动模式 } }

这些变量用于构建整个烟花系统：

canvas：绘制烟花的画布 particles：存储爆炸后的粒子效果 fireworks：存储上升的烟花火箭 autoMode：控制是否自动发射烟花

2. 烟花发射逻辑

// 创建烟花火箭 createFirework(x, y) { const colors = [ '#ff6b6b', '#ff8e8e', '#ffa500', '#ff69b4', '#ff1493', '#ff00ff', '#da70d6', '#ee82ee' ]; const firework = { x: x || Math.random() * this.canvas.width, y: this.canvas.height, targetX: x || Math.random() * this.canvas.width, targetY: Math.random() * this.canvas.height * 0.5, speed: 5 + Math.random() * 5, color: colors[Math.floor(Math.random() * colors.length)] }; this.fireworks.push(firework); }

这个函数负责创建烟花火箭：

随机选择浪漫的粉色系颜色计算从底部到目标位置的轨迹设置随机的上升速度将烟花添加到待发射列表

3. 心形烟花算法

// 心形烟花数学公式 createHeartFirework() { const centerX = this.canvas.width / 2; const centerY = this.canvas.height / 2; for (let i = 0; i < 20; i++) { const angle = (i / 20) * Math.PI * 2; // 心形参数方程 const heartX = centerX + 16 * Math.pow(Math.sin(angle), 3) * 10; const heartY = centerY - (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle)) * 10; this.createSpecialFirework(heartX, heartY, '#ff1744'); } }

这个函数实现了浪漫的心形烟花：

使用心形参数方程计算坐标在屏幕中央形成完美的爱心图案延迟发射营造心跳效果

4. 粒子爆炸效果

// 烟花爆炸生成粒子 explode(firework) { const particleCount = firework.special ? 50 : 30; for (let i = 0; i < particleCount; i++) { const angle = (Math.PI * 2 * i) / particleCount; const velocity = 2 + Math.random() * 3; this.particles.push({ x: firework.x, y: firework.y, vx: Math.cos(angle) * velocity, vy: Math.sin(angle) * velocity, color: firework.color, alpha: 1, size: 2 + Math.random() * 3, gravity: 0.05, decay: 0.02 }); } }

这个函数负责烟花爆炸效果：

根据角度均匀分布粒子添加重力效果模拟真实物理设置透明度衰减营造消失效果粒子大小随机变化增加层次感

5. 动画循环系统

// 主动画循环 animate() { this.updateFireworks(); // 更新烟花位置 this.updateParticles(); // 更新粒子状态 this.draw(); // 绘制当前帧 requestAnimationFrame(() => this.animate()); }

这个循环是整个系统的核心：

使用requestAnimationFrame确保流畅动画分离更新和绘制逻辑，提高性能持续循环创造连续动画效果

Trae老师这次的特色功能

心形烟花

点击"心形烟花"按钮，在屏幕中央绽放一个完美的爱心，数学公式计算的心形曲线，保证每个角度都完美对称！

玫瑰烟花

使用玫瑰线方程r = cos(4θ)，创造出浪漫的玫瑰花图案，每个花瓣都精确计算，让女孩子感受到你的用心！

自动模式

开启自动模式后，烟花会持续随机绽放，营造浪漫氛围，适合表白时的背景效果！

最终效果展示

打开浏览器访问http://localhost:8083，就能看到浪漫的七夕烟花特效了！

点击屏幕，烟花绽放的瞬间，就是表白成功的开始～

总结

这个七夕情人节烟花项目，不仅展示了前端技术的魅力，更重要的是传递了浪漫的情感。Trae老师通过数学公式计算的心形和玫瑰图案，让技术也变得有温度，让她感受到浪漫的气氛吧！

无论是用来表白，还是单纯享受编程的乐趣，这个项目都能让你感受到代码与浪漫的完美结合！Trae老师太浪漫了

七夕快到了，提前祝大家七夕快乐，天下有情人终成眷属！

七夕快到了，看看Trae老师怎么实现浪漫的烟花

前言

第一版的效果