系列专栏
系列文章
| 序号 | 目录 |
|---|---|
| 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哆啦A梦 |
| 22 | HTML流星雨 |
| 23 | HTML沙漏爱心 |
| 24 | HTML爱心字母雨 |
| 25 | HTML爱心流星雨 |
| 26 | HTML生日蛋糕 |
| 27 | HTML3D旋转相册 |
| 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炫酷烟花⑦ |
| 敬请期待…… | |
目录
写在前面
HTML语言实现新春烟花动画的完整代码。
技术需求
1. HTML5 Canvas
<canvas>元素：用于绘制图形，作为画布在网页中展示动画。getContext('2d')：获取绘制2D图形的上下文，用于执行绘图操作，如画点、画线、画圆等。
2. JavaScript 动画与对象导向编程
requestAnimationFrame()：用于创建平滑的动画，自动优化帧率，提供更好的性能和用户体验。- 递归动画：通过递归调用
animate()方法来持续更新和渲染动画。 - 对象导向编程 (OOP)：使用类（
Particle和Firework）来封装烟花和粒子的属性和方法，使代码更易于管理和扩展。Particle类表示一个烟花粒子，每个粒子有生命周期、位置、速度、颜色等属性，并通过update()和draw()方法控制粒子的运动和绘制。Firework类表示一个烟花，包括发射、爆炸以及管理爆炸后的粒子。
3. CSS
canvas样式：使用 CSS 控制canvas元素的显示，确保其占满整个浏览器窗口并去掉滚动条。body样式：设置背景颜色和去除浏览器默认外边距，使得动画背景更加美观。
4. 数学和物理
- 随机数生成：通过
Math.random()随机生成烟花的颜色、速度、粒子的数量等，使得每次动画效果都不同。 - 物理模拟：使用重力（
gravity）模拟粒子受力的效果，让粒子在空中运动时逐渐下落，增加现实感。 - 速度和角度计算：使用三角函数（
Math.cos()和Math.sin()）计算烟花和粒子的运动方向和速度，模拟烟花从底部向上发射的运动轨迹。
5. 颜色与渐变
- HSL 色彩模式：使用 HSL（色相、饱和度、亮度）模式随机生成烟花的颜色，使烟花的颜色更加多样和生动。
- 粒子颜色：每个粒子的颜色会继承烟花的颜色，使得爆炸效果更加统一和美观。
6. HTML5 动画优化
- 减少重绘：每次绘制前先用
ctx.fillRect()填充一个背景色，防止烟花轨迹重复绘制，优化动画效果，减少性能消耗。 - 内存管理：使用粒子的生命周期管理，避免不必要的内存浪费。当粒子的生命周期结束时，将其从数组中移除。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firework Animation</title>
<style>
body {
margin: 0;
overflow: hidden;
background: rgb(20, 20, 30);
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
……下载代码
下载链接：夸克网盘分享
代码分析
这段代码实现了一个简单的烟花动画效果，利用HTML5中的<canvas>元素和JavaScript进行绘制。通过不断生成和更新烟花的运动轨迹以及爆炸后的粒子效果，展示了一种烟花在夜空中绽放的场景。下面将对这段代码进行详细分析。
一、HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firework Animation</title>
<style>
body {
margin: 0;
overflow: hidden;
background: rgb(20, 20, 30);
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
// JavaScript代码
</script>
</body>
</html>
1.1 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>：页面标题，显示在浏览器标签上。<style>：内嵌CSS样式，设置页面样式。body设置了背景颜色（深蓝色）以及去除外边距，防止滚动条的显示。canvas设置为块级元素，确保它充满整个页面。
<canvas id="fireworksCanvas"></canvas>：<canvas>元素是绘制图形的区域，指定了其ID为fireworksCanvas，将在JavaScript中获取并操作这个元素。<script>：包含了后续的JavaScript代码，用于实现动画效果。
二、JavaScript代码
2.1 获取画布元素
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.getElementById('fireworksCanvas')：通过ID获取画布元素。canvas.getContext('2d')：获取2D绘图上下文，这样就可以使用绘制2D图形的API。canvas.width = window.innerWidth和canvas.height = window.innerHeight：将画布的宽度和高度设置为浏览器窗口的宽度和高度，确保画布覆盖整个窗口。
2.2 定义粒子类
Particle类表示一个烟花爆炸后的粒子。每个粒子都有位置（x,y）、颜色（color）、大小（size）、生命值（life）、速度（vx,vy）、重力（gravity）、消失速度（fade）等属性。update()方法：更新粒子的位置，并根据重力作用调整垂直方向的速度，减少粒子的生命值。draw()方法：绘制粒子，使用arc绘制圆形，并填充颜色。
2.3 定义烟花类
Firework类代表一个烟花对象。每个烟花有一个起始位置（x,y），一个目标位置（targetX,targetY），以及颜色（color）和大小（size）。烟花的速度和方向是根据目标位置计算出来的。update()方法：更新烟花的飞行位置，当烟花到达目标位置时，触发爆炸。draw()方法：绘制烟花的圆形表示（在爆炸前），或绘制爆炸后产生的粒子。explode()方法：当烟花到达目标位置时，生成多个粒子，并初始化它们的随机属性。
2.4 动画循环
fireworks数组存储当前所有的烟花对象。animate()函数是一个递归的动画循环，使用requestAnimationFrame确保动画的流畅性。- 每次绘制时，先使用半透明的黑色背景清除画布，形成烟花爆炸的效果。
- 每隔一定时间（
Math.random() < 0.05）生成一个新的烟花。 - 对每个烟花调用
update()和draw()方法更新和绘制烟花，爆炸后的烟花会生成多个粒子并不断绘制。 - 如果烟花爆炸后没有粒子了，它会被从数组中删除。
三、效果实现
- 烟花发射：每当
animate()被调用时，烟花对象会从画布底部发射到随机的目标位置，模拟烟花上升的过程。 - 烟花爆炸：当烟花到达目标位置时，会触发爆炸，产生多个粒子，粒子向四面八方散开。
- 粒子运动：每个粒子根据随机的角度和速度散开，并受到重力作用，使其逐渐下落。粒子会逐渐消失，直到生命周期结束。
- 动画循环：通过不断更新画布，实现烟花持续展示的效果。
四、总结
这段代码通过<canvas>和JavaScript结合实现了一个具有动态效果的烟花动画。通过合理使用对象和类，封装了烟花和粒子的行为，使得代码结构清晰，易于理解和扩展。通过动画循环，模拟了烟花的发射、飞行、爆炸和粒子消失的过程，展现了烟花在夜空中美丽绽放的效果。
写在后面
我是一只有趣的兔子，感谢你的喜欢。