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 | HTML3D相册 |
| 14 | HTML旋转相册 |
| 15 | HTML基础烟花秀 |
| 16 | HTML炫酷烟花秀 |
| 17 | HTML粉色烟花秀 |
| 18 | HTML新春烟花 |
| 19 | HTML跨年烟花 |
| 20 | HTML音乐圣诞树 |
| 21 | HTML大雪纷飞 |
| 22 | HTML想见你 |
| 23 | HTML元素周期表 |
| 24 | HTML飞舞的花瓣 |
| 25 | HTML星空特效 |
| 26 | HTML黑客帝国字母雨 |
| 27 | HTML哆啦A梦 |
| 28 | HTML流星雨 |
| 29 | HTML沙漏爱心 |
| 30 | HTML爱心字母雨 |
| 31 | HTML爱心流星雨 |
| 32 | HTML生日蛋糕 |
| 33 | HTML3D旋转相册 |
| 34 | HTML流光爱心 |
| 35 | HTML满屏飘字 |
| 36 | HTML飞舞爱心 |
| 37 | HTML星空圣诞树 |
| 38 | HTML礼物圣诞树 |
| 39 | HTML粉色爱心 |
| 40 | HTML旋转圣诞树 |
文章目录
- 系列文章
- 写在前面
- 技术需求
- 完整代码
- 代码分析
- 一、HTML结构分析
- 二、CSS样式分析
- 三、JavaScript实现功能分析
- 1. 全局变量初始化
- 2. 烟花和粒子类设计
- （1）`Firework`类
- （2）`Particle`类
- 3. 烟花效果的生成与动画
- 4. 窗口自适应
- 四、代码运行机制与特点
- 五、总结
- 写在后面
写在前面
HTML语言实现新春烟花的完整代码。
技术需求
-
HTML5 Canvas
- 利用
<canvas>标签及其2D绘图上下文（通过getContext("2d")获取）实现烟花动画的动态绘制。
- 利用
-
CSS样式
- 采用绝对定位（
position: absolute）确保文字居中显示。 - 运用视窗单位（
vw）动态调整字体大小，并结合颜色渐变（text-shadow）提升视觉效果。 - 设置深色背景（
background-color），以突出烟花的视觉冲击力。
- 采用绝对定位（
-
JavaScript动画
- 面向对象编程：创建
Firework和Particle类，封装烟花与粒子的行为属性（如位置、速度、透明度等）。 - 动画实现：借助
requestAnimationFrame确保动画流畅运行；模拟真实物理效果，动态调整粒子的摩擦力、重力和透明度。 - 随机性：利用
Math.random控制粒子的数量、颜色、方向和速度，生成多样化的烟花效果。 - 拖尾效果：每帧绘制半透明矩形，营造烟花拖尾的视觉效果。
- 面向对象编程：创建
-
事件监听
- 监听
resize事件，动态调整<canvas>画布尺寸，以适应窗口大小的变化。
- 监听
完整代码
<!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"];
……代码分析
以下是对这段HTML代码的详细分析，从页面结构、样式设计到JavaScript实现功能进行全面解读：
一、HTML结构分析
-
文档声明与基本结构
- 代码以
<!DOCTYPE html>开头，表明该文档遵循HTML5标准。 <html>标签包含整个页面内容，并通过lang="en"属性指定页面语言为英语。<head>标签中定义了元信息：<meta charset="UTF-8">确保页面使用UTF-8字符编码，保障字符正确显示。<meta name="viewport" content="width=device-width, initial-scale=1.0">实现页面在不同设备上的自适应布局。<title>标签定义页面标题为“新春烟花”。
<body>标签内包含一个用于显示新年祝福文字的<div>元素和一个用于绘制烟花动画的<canvas>元素。
- 代码以
-
关键HTML元素
<div id="text">: 显示“Happy New Year!”文字，增强节日氛围。<canvas id="fireworks">: 作为烟花动画的画布元素，提供动态展示的基础。
二、CSS样式分析
-
页面整体样式
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添加光晕效果，使文字更为亮丽。
三、JavaScript实现功能分析
JavaScript部分的核心是通过<canvas>元素生成和控制烟花的动画效果。代码逻辑分为以下几个部分：
1. 全局变量初始化
canvas和ctx：获取画布元素及其上下文，ctx用于调用绘图API。colors：定义颜色数组，用于随机选择烟花颜色。
2. 烟花和粒子类设计
代码使用了两种类：Firework和Particle，分别描述烟花和烟花粒子。
（1）Firework类
- 构造函数：
- 参数
x和y指定烟花初始位置。 this.particles存储粒子对象数组。- 调用
createParticles方法生成粒子。
- 参数
- 方法：
createParticles：生成50到100个随机数量的粒子。update：更新每个粒子的状态（位置、透明度等），当粒子透明度降至0以下时，将其移除。draw：调用每个粒子的绘制方法。
（2）Particle类
- 构造函数：
x和y为粒子初始位置。radius：粒子大小随机，范围在2到5之间。color：从颜色数组中随机选择颜色。angle：粒子初始运动方向随机。speed：粒子初速度随机，范围在2到7之间。friction和gravity：摩擦力和重力影响粒子运动。alpha：粒子透明度，用于渐隐效果。
- 方法：
update：计算粒子的新位置，速度逐渐减小，同时透明度减少。draw：绘制带颜色的圆形粒子，透明度由globalAlpha控制。
3. 烟花效果的生成与动画
- 全局数组
fireworks存储所有当前活动的烟花。 addFirework方法：在随机位置创建新的烟花并加入fireworks数组。animate函数：- 使用半透明矩形覆盖画布，产生拖影效果。
- 遍历
fireworks数组，更新并绘制每个烟花对象，如果烟花的所有粒子消失，则将其移除。 - 使用
Math.random() < 0.05控制新烟花生成的概率，保持动画间隔随机。 - 使用
requestAnimationFrame保持动画连续性。
4. 窗口自适应
window.addEventListener("resize")监听窗口大小变化事件。- 每当窗口调整大小时，更新画布尺寸以适应新尺寸。
四、代码运行机制与特点
-
烟花效果实现：
- 通过粒子生成与运动模拟烟花爆炸效果。
- 粒子的颜色、运动方向、速度等均为随机，增强视觉自然感。
- 每次刷新画布时保留上一帧的残影，形成拖尾效果。
-
节日氛围营造：
- 中心文字配合柔和背景和动态烟花，体现新年喜庆主题。
- 动态画面与静态文字结合，增加视觉层次感。
-
性能优化：
- 粒子通过
alpha属性逐渐透明并移除，减少内存占用。 - 拖尾效果使用半透明矩形而非完全清空画布，降低绘制开销。
- 粒子通过
-
响应式设计：
- 使用
vw单位和监听窗口变化事件，确保页面在不同设备上良好显示。
- 使用
五、总结
-
功能扩展：
- 可增加鼠标点击触发烟花效果的功能，提升互动性。
- 添加不同形状的烟花，丰富视觉效果。
- 支持背景音乐播放，进一步增强节日气氛。
-
性能优化：
- 对粒子数量上限进行限制，避免低性能设备卡顿。
- 使用
offscreen canvas处理复杂计算，提升渲染性能。
-
用户自定义：
- 提供控制面板，让用户自定义烟花颜色、大小、数量等参数。
这段代码实现了一个极具节日气氛的动态烟花效果，通过HTML、CSS和JavaScript的良好结合，不仅展现了动画设计的美感，还体现了较高的代码组织与性能优化水平。
写在后面
我是一只有趣的兔子，感谢你的喜欢。