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炫酷烟花⑨ |
| 敬请期待…… | |
写在前面
HTML实现金色流星雨动态效果的完整代码。
技术需求
-
HTML5 Canvas
- 使用
<canvas>元素创建可绘制的画布。 - 通过
getContext('2d')获取 2D 绘图上下文，用于绘制流星。
- 使用
-
JavaScript 面向对象编程（OOP）
- 通过
class Meteor定义流星类，每个流星都是一个对象，封装了其属性和行为（reset、draw、update方法）。 - 使用
new Meteor()创建多个流星实例，并存入数组进行管理。
- 通过
-
动画与渲染
- 使用
requestAnimationFrame(animate)创建循环动画，使流星不断运动。 - 通过
ctx.clearRect()清除画布，实现流畅动画。
- 使用
-
数学计算与随机性
- 通过
Math.random()生成流星的随机位置、大小、颜色、速度等。 - 角度变换：
ctx.rotate(angle * Math.PI / 180)让流星有一定倾斜度。
- 通过
-
事件监听与响应式设计
window.addEventListener('resize', callback)监听窗口大小变化，并调整canvas适应窗口。
完整代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Meteor</title><style>body {margin: 0;overflow: hidden;background-color: black;}canvas {display: block;}</style>
</head>
<body><canvas id="meteorCanvas"></canvas>……
代码分析
下面我将详细分析这个创建流星动画的HTML5代码，从整体结构到具体实现细节进行全面解析。
一、HTML文档结构与基本设置
这个HTML文档采用了标准的HTML5结构，包含以下几个关键部分：
-
DOCTYPE声明：
<!DOCTYPE html>表明这是一个HTML5文档。 -
HTML根元素：设置了lang="zh"属性，表明文档主要使用中文。
-
head部分：
- 字符编码设置为UTF-8
- 视口设置确保移动设备上的正确显示
- 页面标题为"Meteor"
- 包含内联CSS样式
-
body部分：
- 只包含一个canvas元素作为流星动画的绘制区域
- 包含JavaScript代码实现动画效果
二、CSS样式分析
内联CSS样式非常简单但有效地设置了页面外观：
body {margin: 0;overflow: hidden;background-color: black;
}
canvas {display: block;
}
-
body样式：
margin: 0移除了默认的页面边距overflow: hidden防止出现滚动条background-color: black设置黑色背景，模拟夜空
-
canvas样式：
display: block使canvas元素表现为块级元素，避免默认的内联元素带来的布局问题
三、JavaScript实现分析
JavaScript代码是动画的核心，可以分为以下几个主要部分：
1. 画布初始化和设置
const canvas = document.getElementById('meteorCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
- 获取canvas元素和2D绘图上下文
- 设置canvas尺寸与浏览器窗口相同，实现全屏效果
2. 流星颜色定义
const colors = ['gold', 'yellow', 'orange'];
定义了三种暖色调颜色，模拟流星常见的发光颜色。
3. Meteor类实现
Meteor类是代码的核心，封装了流星的所有属性和行为：
构造函数和reset方法
constructor() {this.reset();
}reset() {this.r = Math.random() * 50 + 50; // 半径 50-100this.k = Math.random() * 2 + 2; // 角度参数 2-4this.x = Math.random() * canvas.width * 2 - canvas.width;this.y = Math.random() * canvas.height * 2 - canvas.height;this.speed = Math.random() * 5 + 5; // 速度 5-10this.color = colors[Math.floor(Math.random() * colors.length)];this.angle = -30 + (Math.random() * 10 - 5); // 初始角度带一些随机变化
}
reset()方法初始化或重置流星的所有属性：r：流星半径，随机值50-100k：控制流星形状的角度参数，随机值2-4x和y：初始位置，随机分布在画布周围speed：下落速度，随机值5-10color：从预定义颜色中随机选择angle：初始角度，大约-30度但有一些随机变化
draw方法
draw() {
……
}
- 使用canvas 2D API绘制流星：
- 保存当前绘图状态
- 平移坐标系到流星位置
- 旋转坐标系以创建流星下落的角度
- 绘制流星形状：
- 从原点开始画线
- 旋转并绘制圆弧形成流星头部
- 再次旋转完成形状
- 填充颜色
- 恢复绘图状态
这种绘制方式创建了一个带有尾迹的流星效果，通过旋转和圆弧绘制实现了流星的锥形外观。
update方法
update() {this.y += this.speed;this.x -= this.speed * 2;if (this.y > canvas.height + this.r || this.x < -this.r) {this.reset();this.y = -this.r;this.x = Math.random() * canvas.width * 1.5;}
}
- 更新流星位置：
- y坐标增加实现下落效果
- x坐标减少实现斜向移动（速度是y方向的2倍）
- 检查流星是否移出屏幕，如果是则重置：
- 重置所有属性
- 特别设置y坐标为画布上方(-this.r)
- x坐标随机分布在画布宽度1.5倍范围内
4. 流星数组初始化
const meteors = [];
const meteorCount = 100;for (let i = 0; i < meteorCount; i++) {meteors.push(new Meteor());meteors[i].y = Math.random() * -canvas.height;meteors[i].x = Math.random() * canvas.width * 1.5;
}
- 创建100个流星实例
- 初始化时随机分布在画布上方和周围，避免同时出现
5. 动画循环
function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (const meteor of meteors) {meteor.update();meteor.draw();}requestAnimationFrame(animate);
}
- 清除整个画布
- 更新并绘制每个流星
- 使用requestAnimationFrame实现流畅动画
6. 窗口大小调整处理
window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;
});
- 响应窗口大小变化，调整画布尺寸
- 确保动画始终全屏显示
四、技术亮点分析
-
面向对象设计：
- 使用ES6类封装流星属性和行为
- 每个流星实例独立管理自己的状态
-
Canvas绘图技巧：
- 使用translate和rotate实现复杂形状绘制
- 通过save/restore管理绘图状态
- 路径绘制与填充结合创建视觉效果
-
性能优化：
- 使用requestAnimationFrame实现高效动画
- 对象池技术（通过reset重用流星对象）
- 批量绘制操作
-
随机性应用：
- 多种属性使用随机值增加自然感
- 初始位置分散避免集中出现
写在后面
我是一只有趣的兔子，感谢你的喜欢。