HTML金色流星雨

Want5952025-06-24 23:08

文章目录

系列文章

序号 目录
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实现金色流星雨动态效果的完整代码。

技术需求

  1. HTML5 Canvas

    • 利用 <canvas> 元素构建可绘制的画布。
    • 通过调用 getContext('2d') 获取 2D 绘图上下文，以实现流星的绘制。

  2. JavaScript 面向对象编程（OOP）

    • 定义 class Meteor 来创建流星类，每个实例代表一个流星，封装了其属性和行为（包括 reset、draw 和 update 方法）。
    • 使用 new Meteor() 创建多个流星实例，并将其存储在数组中进行统一管理。

  3. 动画与渲染

    • 采用 requestAnimationFrame(animate) 实现循环动画，确保流星持续运动。
    • 运用 ctx.clearRect() 清除画布内容，保证动画流畅运行。

  4. 数学计算与随机性

    • 利用 Math.random() 函数生成流星的随机位置、大小、颜色及速度等属性。
    • 角度变换：使用 ctx.rotate(angle * Math.PI / 180) 调整流星的倾斜角度。

  5. 事件监听与响应式设计

    • 通过 window.addEventListener('resize', callback) 监听窗口尺寸变化，动态调整 canvas 大小以适应不同屏幕。

完整代码

python 复制代码 
<!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结构，包含以下关键部分：

  1. DOCTYPE声明 ：<!DOCTYPE html>，表明这是一个HTML5文档。
  2. HTML根元素 ：设置了lang="zh"属性，表示文档主要使用中文。
  3. head部分 ：
    • 字符编码设置为UTF-8。
    • 视口设置确保在移动设备上正确显示。
    • 页面标题为"Meteor"。
    • 包含内联CSS样式。
  4. body部分 ：
    • 只包含一个canvas元素作为流星动画的绘制区域。
    • 包含JavaScript代码以实现动画效果。

二、CSS样式分析

内联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. 画布初始化和设置

javascript 复制代码 
const canvas = document.getElementById('meteorCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
  • 获取canvas元素和2D绘图上下文。
  • 设置canvas尺寸与浏览器窗口相同，实现全屏效果。

2. 流星颜色定义

javascript 复制代码 
const colors = ['gold', 'yellow', 'orange'];

定义了三种暖色调颜色，模拟流星常见的发光颜色。

3. Meteor类实现

Meteor类封装了流星的所有属性和行为：

构造函数和reset方法
javascript 复制代码 
constructor() {
    this.reset();
}

reset() {
    this.r = Math.random() * 50 + 50; // 半径 50-100
    this.k = Math.random() * 2 + 2;   // 角度参数 2-4
    this.x = Math.random() * canvas.width * 2 - canvas.width;
    this.y = Math.random() * canvas.height * 2 - canvas.height;
    this.speed = Math.random() * 5 + 5; // 速度 5-10
    this.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方法
javascript 复制代码 
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方法
javascript 复制代码 
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. 流星数组初始化

javascript 复制代码 
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. 动画循环

javascript 复制代码 
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    for (const meteor of meteors) {
        meteor.update();
        meteor.draw();
    }
    
    requestAnimationFrame(animate);
}
  • 清除整个画布。
  • 更新并绘制每个流星。
  • 使用requestAnimationFrame实现流畅动画。

6. 窗口大小调整处理

javascript 复制代码 
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});
  • 响应窗口大小变化，调整画布尺寸。
  • 确保动画始终全屏显示。

四、技术亮点分析

  1. 面向对象设计 ：
    • 使用ES6类封装流星属性和行为。
    • 每个流星实例独立管理自己的状态。
  2. Canvas绘图技巧 ：
    • 使用translate和rotate实现复杂形状绘制。
    • 通过save/restore管理绘图状态。
    • 路径绘制与填充结合创建视觉效果。
  3. 性能优化 ：
    • 使用requestAnimationFrame实现高效动画。
    • 对象池技术（通过reset重用流星对象）。
    • 批量绘制操作。
  4. 随机性应用 ：
    • 多种属性使用随机值增加自然感。
    • 初始位置分散避免集中出现。

写在后面

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

热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02vue数据变化但页面不变03全球最强模型Grok4，国内已可免费使用！（附教程）04KGG转MP3工具|非KGM文件|解密音频05干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！06【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致07扣子开源本地部署教程 丨Coze智能体小白喂饭级指南08ChatGPT Agent 完全使用指南：2025年7月最新功能详解09《魔兽世界》提示lua警告的含义及解决方法10这次领先Cursor！体验了Trae 2.0 SOLO 模式，超酷！