当前位置： 首页 > news >正文

用 HTML5 Canvas 和 JavaScript 实现流星雨特效

news 2026/2/8 14:57:29

最近在研究前端动画效果时，实现了一个超酷的流星雨特效，今天来和大家分享下具体实现过程。

1，整体实现思路

这个流星雨特效主要由 HTML、CSS 和 JavaScript 协同完成。HTML 搭建基础结构，CSS 负责页面样式设计，JavaScript 实现星星和流星的动态效果。
效果展示：

用 HTML5 Canvas 和 JavaScript 实现流星雨特效

2，关键代码解析

2.1 HTML 结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流星雨特效</title><style>/* 省略CSS代码 */</style>
</head><body><button id="fullscreenButton">全屏</button><canvas id="meteorCanvas"></canvas><audio id="backgroundMusic" loop><source src="background.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio><script>/* 省略JavaScript代码 */</script>
</body></html>

这里定义了一个全屏按钮、用于绘制动画的canvas画布以及播放背景音乐的audio标签。

2.2 CSS 样式

body,
html {margin: 0;padding: 0;overflow: hidden;height: 100%;background: linear-gradient(to bottom, #000011, #000033);
}canvas {display: block;
}#fullscreenButton {position: absolute;bottom: 10px;right: 10px;z-index: 1000;padding: 5px 10px;background-color: rgba(255, 255, 255, 0.4);border: none;cursor: pointer;
}

通过 CSS 设置渐变背景模拟夜空，同时对canvas和按钮的样式进行布局，按钮在右下角且有半透明背景。

2.3 JavaScript 核心逻辑

2.3.1 画布设置

const canvas = document.getElementById("meteorCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

获取canvas元素及其绘图上下文，并设置画布尺寸与窗口一致。

2.3.2 星星类

class Star {constructor() {this.init();}init() {this.x = Math.random() * canvas.width;this.y = Math.random() * canvas.height;this.size = Math.

相关文章：

用 HTML5 Canvas 和 JavaScript 实现流星雨特效

最近在研究前端动画效果时，实现了一个超酷的流星雨特效，今天来和大家分享下具体实现过程。 1，整体实现思路 这个流星雨特效主要由 HTML、CSS 和 JavaScript 协同完成。HTML 搭建基础结构，CSS 负责页面样式设计，JavaScript 实现星星和流星的动态效果。 效果展示： 用 HTM…...

编程日记 2025/1/12 2:07:41

Apifox=Postman+Swagger+Jmeter+Mock

A. 开发人员接口管理使用(Swagger 工具管理接口) B. 后端开发人员通过Postman 工具&#xff0c;一边开发一边测试 C. 前端开发人员需要Mock 工具提供前端调用 D. 测试人员通过(Postman、Jmeter)等工具进行接口测试 为了后台开发、前端开发、测试工程师等不同角色更加便捷管理…...

编程日记 2025/1/12 2:06:40

SpringBoot多数据源架构实现

文章目录 1. 环境准备2. 创建Spring Boot项目3. 添加依赖4. 配置多数据源5. 配置MyBatis-Plus6. 使用多数据源7. 创建Mapper接口8. 实体类定义9. 测试多数据源10. 注意事项10.1 事务导致多数据源失效问题解决方案&#xff1a; 10.2 ClickHouse的事务支持10.3 数据源切换的性能开…...

编程日记 2025/1/12 2:05:38

HarmonyOS开发：传参方式

一、父子组件传参 1、父传子&#xff08;Prop方式&#xff09; 父组件代码 Entry Component struct ParentComponent {State parentMessage: string Hello from Parent;build() {Column() {ChildComponent({ message: this.parentMessage });}} } 子组件代码 Component s…...

编程日记 2025/1/12 2:04:31

OpenCV计算机视觉 07 图像的模块匹配

在做目标检测、图像识别时&#xff0c;我们经常用到模板匹配&#xff0c;以确定模板在输入图像中的可能位置 API函数 cv2.matchTemplate(image, templ, method, resultNone, maskNone) 参数含义&#xff1a; image&#xff1a;待搜索图像 templ&#xff1a;模板图像 method&…...

编程日记 2025/1/12 2:02:28

国产游戏崛起，燕云十六移动端1.9上线，ToDesk云电脑先开玩

游戏爱好者的利好消息出新了&#xff01;网易大型武侠仙游《燕云十六声》正式官宣&#xff0c;移动端要在1月9日正式上线了&#xff01;你期待手游版的燕云吗&#xff1f;不妨评论区留言说说你的看法。小编分别花了几个小时在台式机电脑和手机上都试了下&#xff0c;欣赏画面还…...

编程日记 2025/1/12 1:55:20

企业级PHP异步RabbitMQ协程版客户端 2.0 正式发布

概述 workerman/rabbitmq 是一个异步RabbitMQ客户端&#xff0c;使用AMQP协议。 RabbitMQ是一个基于AMQP&#xff08;高级消息队列协议&#xff09;实现的开源消息组件&#xff0c;它主要用于在分布式系统中存储和转发消息。RabbitMQ由高性能、高可用以及高扩展性出名的Erlan…...

编程日记 2025/1/12 1:54:17

[OPEN SQL] 限定选择行数

本次操作使用的数据库表为SCUSTOM&#xff0c;其字段内容如下所示 航班用户(SCUSTOM) 该数据库表中的部分值如下所示 指定查询多少行数据&#xff0c;我们可以使用语法UP TO n ROWS来实现对数据前n项的查询 语法格式 SELECT * FROM <dbtab> UP TO n ROWS 参数说明 db…...

编程日记 2025/1/12 1:49:11

Vite源码学习分享(一)

!](https://i-blog.csdnimg.cn/direct/971c35b61c57402b95be91d2b4965d85.png) 同一个项目 vite VS webpack启动速度对比...

编程日记 2025/1/12 1:48:10

定位，用最通俗易懂的方法2：TDOA与对应的CRLB

二郎就不设置什么VIP可见啥的了&#xff0c;这样大家都能看到。 如果觉得受益&#xff0c;可以给予一些打赏&#xff0c;也算对原创的一些鼓励&#xff0c;谢谢。 钱的用途&#xff1a;1&#xff09;布施给他人&#xff1b;2&#xff09;二郎会有更多空闲时间写教程 起因&…...

编程日记 2025/1/12 1:45:07

Linux第一课：c语言 学习记录day06

四、数组 冒泡排序 两两比较&#xff0c;第 j 个和 j1 个比较 int a[5] {5, 4, 3, 2, 1}; 第一轮&#xff1a;i 0 n&#xff1a;n个数&#xff0c;比较 n-1-i 次 4 5 3 2 1 // 第一次比较 j 0 4 3 5 2 1 // 第二次比较 j 1 4 3 2 5 1 // 第三次比较 j 2 4 3 2 1 5 // …...

编程日记 2025/1/12 1:44:00

ExplaineR：集成K-means聚类算法的SHAP可解释性分析 | 可视化混淆矩阵、决策曲线、模型评估与各类SHAP图

集成K-means聚类算法的SHAP可解释性分析 加载数据集并训练机器学习模型 SHAP 分析以提取特征对预测的影响 通过混淆矩阵可视化模型性能 决策曲线分析 模型评估&#xff08;多指标和ROC曲线的目视检查&#xff09; 带注释阈值的 ROC 曲线 加载 SHAP 结果以进行下游分析 与…...

编程日记 2025/1/12 1:38:46

2025年第三届“华数杯”国际大学生数学建模竞赛A题题目

问题A&#xff1a;他能游得更快吗&#xff1f; 背景介绍 在2024年巴黎奥运会上&#xff0c;中国游泳运动员潘展乐凭借出色的表现成为全球瞩目的焦点。年仅19岁的他在男子100米自由泳比赛中以46秒40 的成绩夺冠&#xff0c;并创造了自己保持的世界纪录。在男子4100米混合泳接力…...

编程日记 2025/1/12 1:37:37

用c实现C++类（八股）

在 C 语言中&#xff0c;虽然没有内建的面向对象编程&#xff08;OOP&#xff09;特性&#xff08;如封装、继承、多态&#xff09;&#xff0c;但通过一些编程技巧&#xff0c;我们仍然可以模拟实现这些概念。下面将用通俗易懂的方式&#xff0c;逐步介绍如何在 C 中实现封装、…...

编程日记 2025/1/12 1:35:36

【C++多线程编程：六种锁】

目录 普通互斥锁&#xff1a; 轻量级锁 独占锁&#xff1a; std::lock_guard&#xff1a; std::unique_lock: 共享锁&#xff1a; 超时的互斥锁 递归锁 普通互斥锁&#xff1a; std::mutex确保任意时刻只有一个线程可以访问共享资源&#xff0c;在多线程中常用于保…...

编程日记 2025/1/12 1:31:30

【Javascript Day5】for循环及典型案例

for 循环 // 语法&#xff1a; for( 开始 ; 结束 ; 步长 ){ 循环体 } // for( var i 循环初始值 ; i的循环范围 ; i的增加或减少规则 ){ 循环体 } // 死循环 // for(;;){ // console.log("for循环"); // } // 循环打…...

编程日记 2025/1/12 1:29:28

#渗透测试#网络安全#一文了解什么是shell反弹！！！

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…...

编程日记 2025/1/12 1:28:26

《解锁图像的语言密码：Image Caption 开源神经网络项目全解析》

《解锁图像的语言密码&#xff1a;Image Caption 开源项目全解析》 一、开篇&#xff1a;AI 看图说话时代来临二、走进 Image Caption 开源世界三、核心技术拆解&#xff1a;AI 如何学会看图说话&#xff08;一&#xff09;深度学习双雄&#xff1a;CNN 与 RNN&#xff08;二&a…...

编程日记 2025/1/12 1:27:24

抢占欧洲电商高地，TikTok 运营专线成 “秘密武器”

在当今数字化浪潮席卷全球的时代&#xff0c;社交媒体平台已成为商业拓展的关键阵地&#xff0c;TikTok 更是其中的闪耀新星。近日&#xff0c;一则重磅消息引发行业关注&#xff1a;TikTok 正计划于 2025 年初进军荷兰电商市场。这一战略布局&#xff0c;不仅彰显了 TikTok 对…...

编程日记 2025/1/12 1:26:23

人工智能-数据分析及特征提取思路

1、概况 基于学生行为数据预测是否涉黄、涉黑等。 2.数据分析 数据分析的意义包括得到数据得直觉、发掘潜在的结构、提取重要的变量、删除异常值、检验潜在的假设和建立初步的模型。 2.1数据质量分析 2.1.1数据值分析 查看数据类型&#xff1a; 首先明确各字段的数据类型…...

编程日记 2025/1/12 1:20:16

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/4 17:44:58

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2026/1/29 20:58:41

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/8 6:37:36

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/2/4 19:47:03

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2026/1/29 8:51:33

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

编程新知 2026/1/23 18:15:21

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...

编程新知 2026/1/22 15:34:33