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

HTML炫酷烟花⑨

news 2025/11/5 13:00:03

写在前面

用代码点燃一场属于新春的视觉盛宴——这是一场在浏览器中绽放的烟花庆典。通过HTML5 Canvas与JavaScript的结合，我构建了一个动态、绚丽且充满节日氛围的烟花动画系统。每当页面加载，无数色彩斑斓的烟花便在深邃夜空中次第升腾、炸裂、飘散，伴随着“蛇年大吉！”的祝福文字，仿佛将新春的喜悦直接洒向屏幕前的你。

系列文章

序号	目录
1	HTML满屏跳动的爱心
2	HTML五彩缤纷的爱心
3	HTML满屏漂浮爱心
4	HTML情人节爱心
5	HTML蓝色爱心射线
6	HTML跳动的爱心
7	HTML跳动的双爱心
8	HTML粒子爱心
9	HTML蓝色动态爱心
10	HTML橙色动态粒子爱心
11	HTML旋转爱心
12	HTML爱情树
13	HTML元素周期表
14	HTML飞舞的花瓣
15	HTML星空特效
16	HTML黑客帝国字母雨
17	HTML哆啦A梦
18	HTML流星雨
19	HTML沙漏爱心
20	HTML爱心字母雨
21	HTML爱心流星雨
22	HTML生日蛋糕
23	HTML流光爱心
24	HTML粉色爱心
25	HTML满屏飘字
26	HTML飞舞爱心
27	HTML音乐圣诞树
28	HTML星空圣诞树
29	HTML礼物圣诞树
30	HTML旋转圣诞树
31	HTML旋转相册①
32	HTML旋转相册②
33	HTML旋转相册③
34	HTML大雪纷飞①
35	HTML大雪纷飞②
36	HTML炫酷烟花①
37	HTML炫酷烟花②
38	HTML炫酷烟花③
39	HTML炫酷烟花④
40	HTML炫酷烟花⑤
41	HTML炫酷烟花⑥
42	HTML炫酷烟花⑦
43	HTML炫酷烟花⑧
44	HTML炫酷烟花⑨
45	HTML金色流星雨
敬请期待……

技术需求

Canvas核心渲染机制

使用<canvas>元素作为绘图主舞台，通过getContext("2d")获取绘图上下文，实现像素级的图形控制。
动态设置画布尺寸为窗口宽高，确保全屏显示，并监听resize事件以适配不同设备屏幕，提升响应式体验。

动画循环与性能优化

借助requestAnimationFrame创建平滑动画循环，保证每秒60帧左右的渲染节奏，使烟花运动自然流畅。
采用半透明背景层（rgba(20, 20, 30, 0.2)）实现拖尾消散效果，模拟真实烟花余晖渐隐的视觉感受。

面向对象的粒子系统设计

定义Firework类作为烟花主体，封装位置、粒子集合及行为逻辑；每个烟花由数十至上百个Particle粒子构成，体现爆炸后的散射形态。
粒子具备独立的速度、角度、摩擦力、重力和透明度衰减机制，模拟真实物理运动轨迹。

色彩与视觉表现管理

预设一组高饱和度的霓虹色系（红、橙、黄、绿、青、蓝、紫），通过随机选取赋予每颗粒子独特色彩，增强视觉冲击力。
利用globalAlpha控制粒子透明度变化，结合fillStyle与arc方法绘制圆形光点，营造光晕感。

动态生成与生命周期控制

每个烟花在随机位置生成，其粒子数量也随机化，避免重复模式，增强自然感。
当粒子透明度降至零或烟花粒子耗尽时，自动从动画队列中移除，释放内存资源，维持运行效率。

交互与布局设计

页面中央固定显示“蛇年大吉！”祝福语，采用大字号、柔光阴影与粉色调，突出节日主题，形成视觉焦点。
背景使用深蓝紫色（#14141E），营造静谧夜空氛围，衬托出烟花的明亮与热烈。

主要代码

创作不易，订阅后可查看完整代码

《Python趣味编程》
《C/C++趣味编程》
《HTML趣味编程》
《Java趣味编程》

<!DOCTYPE html>
<html lang="en">
<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: #14141E;font-family: Arial, sans-serif;}canvas {display: block;}#text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 10vw;font-weight: bold;color: rgb(255, 190, 200);text-shadow: 2px 2px 10px rgba(255, 190, 200, 0.7);}</style>
</head>
<body><div id="text">蛇年大吉！</div><canvas id="fireworks"></canvas><script>const canvas = document.getElementById("fireworks");const ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;const colors = ["#ff4d4d", "#ff9933", "#ffcc00", "#33cc33", "#33cccc", "#3399ff", "#cc66ff"];class Firework {constructor(x, y) {this.x = x;this.y = y;this.particles = [];this.createParticles();}createParticles() {const particleCount = Math.random() * (100 - 50) + 50;for (let i = 0; i < particleCount; i++) {this.particles.push(new Particle(this.x, this.y));}}update() {this.particles.forEach((particle, index) => {particle.update();if (particle.alpha <= 0) {this.particles.splice(index, 1);}});}draw() {this.particles.forEach(particle => particle.draw());}}class Particle {constructor(x, y) {this.x = x;this.y = y;this.radius = Math.random() * 3 + 2;this.color = colors[Math.floor(Math.random() * colors.length)];this.angle = Math.random() * Math.PI * 2;this.speed = Math.random() * 5 + 2;this.friction = 0.98;this.gravity = 0.02;this.alpha = 1;}update() {this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed;this.speed *= this.friction;this.alpha -= this.gravity;}……

创作流程

我创作这段代码时，心中装着的不是技术，而是一种情绪——那种除夕夜站在阳台上，仰头看着烟花一朵接一朵升空炸裂的感动。我想把那一刻的震撼与温暖，用代码重新唤醒。于是，我决定不只做一个简单的动画，而是构建一个能呼吸、有节奏、会消逝的虚拟夜空。

一开始，我选择了最纯粹的黑作为背景，但发现它太冷、太死寂。于是我把背景调成深紫蓝，像被城市灯火微微照亮的冬夜天幕，再加入一层极淡的半透明覆盖，让每一帧都带着轻微的残影，仿佛空气里还留着上一朵烟花的温度。这就是我想要的“记忆感”——不是瞬间的闪光，而是层层叠叠的情绪堆积。

接着，我开始思考烟花的本质：它不是一颗球，而是一次爆发，是一群微小光点从中心向外喷射的生命旅程。所以我没有直接画烟花，而是先定义了一个“粒子”。每个粒子都有自己的方向、速度、颜色和寿命。它们出生在同一地点，却奔向不同的命运。我给它们加上了摩擦力和重力，让它们飞得越来越慢，越来越低，最后悄然消失。这种衰减不是突兀的结束，而是一种温柔的告别。

为了让画面不显得机械，我刻意引入了大量随机性：烟花出现的时间、位置、数量、粒子数目、颜色组合……全都交给概率决定。我甚至控制每秒生成烟花的概率只有30%，这样就不会过于密集，保留了现实中的期待感——你得等一等，才会迎来下一次惊艳。

最让我花心思的是视觉氛围的营造。我在画布中央写下了“蛇年大吉！”，用粉嫩的色调和发光效果，让它像一盏悬挂的灯笼，成为整幅画面的情感锚点。所有的烟花都在为它庆祝，仿佛整个夜空都在说着同一句祝福。

当我在浏览器中第一次运行这个程序时，看着第一朵烟花在寂静中炸开，光点四散飘落，那一刻我知道，我不仅写了一段代码，更复刻了一种心情——那是对时间流逝的敬畏，对美好瞬间的珍惜，也是对新年的虔诚祈愿。