HTML金色流星雨

HTML流星雨

文章目录

系列文章
写在前面
技术需求
完整代码
代码分析
- 一、HTML文档结构与基本设置
- 二、CSS样式分析
- 三、JavaScript实现分析
- - 1. 画布初始化和设置
  - 2. 流星颜色定义
  - 3. Meteor类实现
  - - 构造函数和reset方法
    - draw方法
    - update方法
  - 4. 流星数组初始化
  - 5. 动画循环
  - 6. 窗口大小调整处理
- 四、技术亮点分析
写在后面

系列文章

序号	目录
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-100。
- k：角度参数，随机值2-4。
- x和y：初始位置，随机分布在画布周围。
- speed：速度，随机值5-10。
- color：从预定义颜色中随机选择。
- angle：初始角度，大约-30度但有一些随机变化。

draw方法

draw() {ctx.save();ctx.translate(this.x, this.y);ctx.rotate(this.angle * Math.PI / 180);ctx.beginPath();ctx.moveTo(0, 0);ctx.arc(0, 0, this.r, 0, this.k * Math.PI);ctx.lineTo(this.r * Math.cos(this.k * Math.PI), this.r * Math.sin(this.k * Math.PI));ctx.closePath();ctx.fillStyle = this.color;ctx.fill();ctx.restore();
}

使用canvas 2D API绘制流星：
1. 保存当前绘图状态。
2. 平移坐标系到流星位置。
3. 旋转坐标系以创建流星下落的角度。
4. 绘制流星形状：
  - 从原点开始画线。
  - 旋转并绘制圆弧形成流星头部。
  - 再次旋转完成形状。
5. 填充颜色。
6. 恢复绘图状态。

这种绘制方式创建了一个带有尾迹的流星效果，通过旋转和圆弧绘制实现了流星的锥形外观。

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重用流星对象）。
- 批量绘制操作。
随机性应用：
- 多种属性使用随机值增加自然感。
- 初始位置分散避免集中出现。