HTML新春烟花代码

系列文章

序号	目录
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炫酷烟花⑨
敬请期待......

写在前面

用HTML5 Canvas绘制新春烟花动画的完整代码。

技术需求

Canvas画布初始化

通过canvas.width和canvas.height动态设置画布尺寸，适配浏览器窗口大小，确保全屏显示效果。
使用getContext("2d")获取2D渲染上下文，为后续图形绘制提供操作接口。

视觉风格与交互设计

设置深色背景（#14141E）模拟夜空氛围，增强烟花色彩的对比度与视觉冲击力。
在页面中央添加"Happy New Year!"文字，采用柔和粉色调与阴影效果，营造节日喜庆感。

粒子系统建模

设计Particle类实现单个烟花粒子，包含位置、速度、方向、摩擦力、重力和透明度等物理属性，模拟真实运动轨迹。
粒子的update方法中集成速度衰减与重力影响，使轨迹呈现抛物线并逐渐消散，增强动态真实感。

烟花爆炸效果实现

创建Firework类管理烟花整体行为，每个实例在指定坐标生成50--100个随机方向的粒子群，形成爆炸扩散效果。
利用globalAlpha控制粒子透明度渐变，实现由亮到暗的消逝过程，模仿真实烟花余晖。

动画循环与性能优化

使用requestAnimationFrame构建流畅动画循环，每帧重绘画布并更新所有粒子状态。
通过半透明黑色矩形（rgba(20, 20, 30, 0.2)）实现拖尾效果，既保留残影又避免画面过曝。

随机性与动态生成

每帧以5%概率触发新烟花生成，位置随机分布于画布上半区域，模拟真实燃放的不可预测性。
粒子颜色从预设调色板中随机选取，确保每次爆炸呈现不同色彩组合，提升视觉丰富度。

响应式布局支持

监听窗口resize事件，动态调整画布尺寸，保证在不同设备上均能全屏展示，提升用户体验。

主要代码

html 复制代码

<!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: 5vw;
            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">Happy New Year!</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"
        ];
......

创作流程

我创作这个新春烟花动画时，心中想的不只是技术实现，而是一场献给新年的视觉仪式。我想让每一个看到它的人，都能感受到那种夜空中突然绽放的惊喜与温暖。于是，我决定用代码来还原烟花最动人的瞬间------那一刹那的辉煌，以及它在黑暗中缓缓消散的余韵。

一开始，我选择了最纯粹的黑色作为背景，但发现太死板，缺乏层次。于是我改用深灰偏蓝的暗色，再叠加一层半透明的覆盖层，这样每一帧的残影都能留下淡淡的轨迹，就像真实夜空中烟花燃尽后的余光，既保留了动态的连续性，又不会让画面变得杂乱。这种"拖尾"效果，是我反复调试才找到的平衡点。

接下来是烟花本身。我不想让它只是简单的光点扩散，而是要有生命感。于是我引入了物理概念：每个粒子都有自己的速度、角度、摩擦力和微弱的重力。它们从爆炸中心向外喷射，然后逐渐减速、下坠、变淡，直到消失。这个过程让我想起了真实的烟花------并不是所有粒子都整齐划一地飞散，而是有的快、有的慢，有的高、有的低，正是这种不规则，才让它显得真实而动人。

颜色是我最用心打磨的部分。我选了红、橙、黄、绿、青、蓝、紫这一组高饱和的暖调与冷调混合色，既符合节日的喜庆，又能在黑夜里跳脱出来。每一朵烟花的颜色都是随机组合的，就像现实中没有两朵完全相同的焰火。我甚至让粒子的大小也略有差异，有的明亮如星，有的细碎如尘，这样整体看起来更有层次。

为了让画面不显得空旷或过于密集，我设置了随机触发机制：每一帧都有一个小概率点燃新的烟花。它可能出现在左上角，也可能从底部升起，位置不固定，节奏也不规律。这种"不可预测性"恰恰是真实燃放的精髓------你永远不知道下一朵会在何时何地绽放。

最让我感动的是中央那句"Happy New Year!"。我把它放在正中心，用柔和的粉色和发光效果，让它像被烟花照亮的祝福语。它不动，但周围的光影在变，仿佛整个夜空都在为这一刻庆祝。每当我看到一朵烟花恰好在文字上方炸开，心里就会涌起一种难以言喻的满足。

这不仅仅是一个动画，它是我在代码中写下的新年诗篇。每一个粒子，都是我对未来的期许；每一次爆炸，都是对旧岁的告别。当满屏星光四散，我仿佛也站在了那个寒冷却温暖的冬夜里，抬头仰望，等待下一朵花开。

写在后面

我是一只有趣的兔子，感谢你的喜欢！