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

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

news 2026/4/3 6:47:22

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

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

墨语灵犀网络安全知识库：基于AI的威胁情报分析与解读

墨语灵犀网络安全知识库&#xff1a;让AI成为你的安全分析师 最近和几个做安全运营的朋友聊天&#xff0c;他们都在抱怨同一件事&#xff1a;每天面对海量的安全告警和晦涩的漏洞报告&#xff0c;眼睛都快看花了。一份新的漏洞描述扔过来&#xff0c;光是理解它到底在说什么、…...

编程新知 2026/4/3 5:38:49

​​​​​​​巧用API接口，数据驱动提升店铺DSR评分

前言 DSR评分&#xff08;Detail Seller Rating&#xff0c;卖家服务评级系统&#xff09;是衡量电商店铺综合服务质量的核心指标&#xff0c;直接影响店铺排名、流量分配和买家信任度。传统的提升方式如加强客服培训、优化物流等固然重要&#xff0c;但在大数据时代&#xff0…...

编程新知 2026/4/3 5:12:09

终极指南：gin-vue-admin前端错误监控告警配置详解 - 邮件与钉钉实时通知方案

终极指南&#xff1a;gin-vue-admin前端错误监控告警配置详解 - 邮件与钉钉实时通知方案 【免费下载链接】gin-vue-admin &#x1f680;ViteVue3Gin拥有AI辅助的基础开发平台&#xff0c;企业级业务AI开发解决方案&#xff0c;内置mcp辅助服务&#xff0c;内置skills管理&#…...

编程新知 2026/4/3 4:03:15

第三届“数信杯”数据安全大赛wp之数据恢复

第三届“数信杯”数据安全大赛wp之数据恢复 缘起 先说实话&#xff0c;这道题比赛时没做出来&#x1f634; RSA题目一直是我的软肋&#xff0c;一般我都是放到最后去碰运气&#xff0c;这道题也是我第一次遇到&#xff0c;想借这次机会好好学习一下。 这里有2个基本概念&am…...

编程新知 2026/4/3 2:31:52

零基础封神！10行代码写渗透专用爬虫，一键扫遍靶场敏感资产

零基础封神&#xff01;10行代码写渗透专用爬虫&#xff0c;一键扫遍靶场敏感资产 上一篇我们一起打破了认知壁垒&#xff0c;焊死了合规红线&#xff0c;用3行代码跑通了第一个渗透型爬虫。 很多粉丝后台私信我说&#xff0c;第一次跑通代码&#xff0c;看到命令行里打印出靶场…...

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

Comsol页岩气水平井压裂模型

Comsol页岩气水平井压裂模型页岩气开采这事儿&#xff0c;说简单也简单说难也难。水平井压裂技术就像在岩石里画树枝——主井眼横向延伸&#xff0c;裂缝网络像毛细血管般扩散。玩过COMSOL的老铁肯定知道&#xff0c;这软件搞多物理场耦合就像拼乐高&#xff0c;但真要把地质力…...

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

zotero使用记录

写在前面&#xff0c;我之前阅读文献使用endnote,仅仅使用他管理文献&#xff0c;然后使用豆包辅助阅读(翻译&#xff0c;搜索&#xff0c;总结&#xff0c;提问(看不懂的地方、公式推导都可以问))&#xff0c;最后使用vscode 编辑markdown 记笔记&#xff1b;这样一个流程看起…...

编程新知 2026/4/3 1:49:11

成本控制艺术：OpenClaw+Phi-3-vision-128k-instruct任务级计费方案

成本控制艺术&#xff1a;OpenClawPhi-3-vision-128k-instruct任务级计费方案 1. 当Token消耗成为拦路虎 上个月收到账单时&#xff0c;我的手指在鼠标滚轮上停滞了整整三秒——Phi-3-vision-128k-instruct的API调用费用比预期高出47%。这个数字让我意识到&#xff0c;在享受…...

编程新知 2026/4/3 0:32:29

提示词合集【自用】

遇到什么问题 用什么方法解决的 为什么不用别的方法 还有没有更好的方法这是一个{简要描述}&#xff0c;请根据以下方式&#xff0c;帮助我学习整个代码库&#xff1a; 项目结构 - 编译方式 - 入口 - 核心逻辑 - 时序图 - 各个步骤关键实现函数。 每次回复只聚焦其中一个部分&a…...

编程新知 2026/4/2 23:29:09

利用快马ai快速原型开发openclaw类网页数据抓取chrome插件

利用AI快速原型开发OpenClaw类网页数据抓取Chrome插件 最近在做一个数据采集的小项目&#xff0c;需要从电商网站抓取商品信息。传统做法要手动写各种XPath和CSS选择器&#xff0c;费时费力。后来发现用InsCode(快马)平台的AI辅助开发&#xff0c;可以快速实现一个类似OpenCla…...

编程新知 2026/4/2 22:28:00