js粒子效果(二)
效果:
代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Particle Animation</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;}</style>
</head><body><canvas id="particle-canvas"></canvas><script>// 获取Canvas元素和2D上下文const canvas = document.getElementById('particle-canvas');const ctx = canvas.getContext('2d');// 设置Canvas的宽度和高度为窗口的宽度和高度canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 鼠标坐标let mouseX = 0;let mouseY = 0;// 创建树叶粒子对象class LeafParticle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 3 + 2;this.speedX = (Math.random() - 0.5) * 5;this.speedY = (Math.random() - 0.5) * 5;}update() {this.x += this.speedX;this.y += this.speedY;if (this.size > 0.2) this.size -= 0.1;}draw() {const distanceToMouse = Math.sqrt((this.x - mouseX) ** 2 + (this.y - mouseY) ** 2);const maxDistance = 100;const colorIntensity = Math.min(1, 1 - distanceToMouse / maxDistance);const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);gradient.addColorStop(0, `rgba(137, 247, 254, ${colorIntensity})`);gradient.addColorStop(1, `rgba(102, 166, 255, ${colorIntensity * 0.8})`);ctx.fillStyle = gradient;ctx.strokeStyle = `rgba(137, 247, 254, ${colorIntensity})`;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.closePath();ctx.fill();ctx.stroke();}}// 创建多个树叶粒子const leaves = [];function createLeaves(e) {mouseX = e.x;mouseY = e.y;for (let i = 0; i < 5; i++) {leaves.push(new LeafParticle(mouseX, mouseY));}}// 监听鼠标移动事件window.addEventListener('mousemove', createLeaves);// 动画循环function animate() {// 清空Canvasctx.clearRect(0, 0, canvas.width, canvas.height);// 更新和绘制每个树叶粒子for (let i = 0; i < leaves.length; i++) {leaves[i].update();leaves[i].draw();}// 移除透明度较低的树叶粒子leaves.forEach((leaf, index) => {if (leaf.size <= 0.2) {leaves.splice(index, 1);}});// 递归调用动画函数requestAnimationFrame(animate);}// 启动动画animate();</script>
</body></html>相关文章：
js粒子效果(二)
效果: 代码: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Particle Animation</title><…...
01.让自己习惯C++
让自己习惯C 条款1：视C为一个语言联邦 条款1中提到了将C看作为一个“语言联邦”的概念。具体来说，“语言联邦”是指将C看作由多种不同的子语言组成的联邦。每种子语言都有自己的惯用法、工具和库，可以用来解决特定的问题。因此，…...
ElementUI table+dialog实现一个简单的可编辑的表格
table组件如何实现可编辑呢？ 我的需求是把table组件那样的表格，实现它点击可以弹出一个框，然后在这个框里面输入你的东西，然后将他回显回去，当然，输入的有可能是时间啥的。 为什么要弹出弹层不在框上直接…...
Rust语言精讲：数据类型全解析
大家好！我是lincyang。 今天，我们将深入探讨Rust语言中的数据类型，这是理解和掌握Rust的基础。 Rust语言数据类型概览 Rust是静态类型语言，所有变量类型在编译时确定。Rust的数据类型分为两类：标量类型和复合类型。…...
《数据结构、算法与应用C++语言描述》-代码实现散列表(线性探查与链式散列)
散列表 完整可编译运行代码：Github:Data-Structures-Algorithms-and-Applications/_22hash/ 定义 字典的另一种表示方法是散列（hashing）。它用一个散列函数（也称哈希函数）把字典的数对映射到一个散列表（…...
Hadoop学习笔记：运行wordcount对文件字符串进行统计案例
文/朱季谦 我最近使用四台Centos虚拟机搭建了一套分布式hadoop环境，简单模拟了线上上的hadoop真实分布式集群，主要用于业余学习大数据相关体系。 其中，一台服务器作为NameNode，一台作为Secondary NameNode，剩下两台当…...
)
python编写简单登录系统(密码混淆加密)
输入非123的数字会显示输入123选项，输入空格或者回车会报错，因为choice设置成int型先输入2个正常账户进去预防了用户名为空，密码为空或者小于3个，用户名已存在3种情况只有用户名和对应的密码都输入正确才能登录成功输入选项3退出代…...
UVA1025 城市里的间谍 A Spy in the Metro
UVA1025 城市里的间谍 A Spy in the Metro 题面翻译 题目大意 某城市地铁是一条直线，有 n n n（ 2 ≤ n ≤ 50 2\leq n\leq 50 2≤n≤50）个车站，从左到右编号 1 … n 1\ldots n 1…n。有 M 1 M_1 M1 辆列车从第 1 1 1 站开…...
【科普知识】什么是步进电机？
德国百格拉公司于1973年发明了五相混合式步进电机及其驱动器，1993年又推出了性能更加优越的三相混合式步进电机。我国在80年代以前，一直是反应式步进电机占统治地位，混合式步进电机是80年代后期才开始发展。 步进电机是一种用电脉冲信号进行…...
AWS云服务器EC2实例实现ByConity快速部署
1. 前言 亚马逊是全球最大的在线零售商和云计算服务提供商。AWS云服务器在全球范围内都备受推崇，被众多业内人士誉为“云计算服务的行业标准”。在国内，亚马逊AWS也以其卓越的性能和服务满足了众多用户的需求，拥有着较高的市场份额和竞争力。…...
Docker的项目资源参考
Docker的项目资源包括以下内容： Docker官方网站：https://www.docker.com/ Docker Hub：https://hub.docker.com/ Docker文档：https://docs.docker.com/ Docker GitHub仓库：https://github.com/docker Docker官方博客…...
wsl-ubuntu 系统端口总被主机端口占用问题解决
wsl-ubuntu 系统端口总被主机端口占用问题解决 0. 问题描述1. 解决方法 0. 问题描述 wsl-ubuntu 子系统中的服务，总是启动失败，错误信息是端口被占用。 用一些命令查看，被占用的端口也没有用服务启动。 1. 解决方法 运行， ne…...
详解自动化之单元测试工具Junit
目录 1.注解 1.1 Test 1.2 BeforeEach 1.3 BeforeAll 1.4 AfterEach 1.5 AfterAll 2. 用例的执行顺序 通过 order() 注解来排序 3. 参数化 3.1 单参数 3.2 多参数 3.3 多参数(从第三方csv文件读取数据源) 3.4 动态参数ParameterizedTest MethodSource() 4. 测试…...
超声波雪深传感器冬季里的科技魔法
在冬季的某个清晨，当你打开大门，被厚厚的积雪覆盖的大地映入眼帘，你是否曾想过，这片雪地的深度是多少？它又如何影响着我们的生活和环境？今天，我们将为你揭开这个谜团，介绍一款神秘的…...
2023年【熔化焊接与热切割】免费试题及熔化焊接与热切割模拟考试
题库来源：安全生产模拟考试一点通公众号小程序 熔化焊接与热切割免费试题是安全生产模拟考试一点通生成的，熔化焊接与热切割证模拟考试题库是根据熔化焊接与热切割最新版教材汇编出熔化焊接与热切割仿真模拟考试。2023年【熔化焊接与热切割】免费试题及…...
【数据结构】—搜索二叉树（C++实现，超详细！）
🎬慕斯主页：修仙—别有洞天 ♈️今日夜电波：消えてしまいそうです—真夜中 1:15━━━━━━️💟──────── 4:18 🔄 ◀️ ⏸ ▶️…...
机器人算法—ROS TF坐标变换
1.TF基本概念 （1）什么是TF？ TF是Transformations Frames的缩写。在ROS中，是一个工具包，提供了坐标转换等方面的功能。 tf工具包，底层实现采用的是一种树状数据结构，根据时间缓冲并维护多个参考…...
路由VRRP配置例子
拓朴如下： 主要配置如下： [R1] interface GigabitEthernet0/0/0ip address 10.1.1.1 255.255.255.0 vrrp vrid 1 virtual-ip 10.1.1.254vrrp vrid 1 priority 200vrrp vrid 1 preempt-mode timer delay 20 # interface GigabitEthernet0/0/1ip address …...
OpenGL 绘制点与三角形（Qt）
文章目录 一、简介二、实现代码三、实现效果一、简介 这里对OpenGL中点与三角形相关绘制操作进行封装，方便后续点云数据与模型数据的渲染。 二、实现代码 这里我们先创建一个基类Drawable，后续的点、线、面等，均会继承该类： Drawable.h #ifndef DRAWABLE_H #define DRAWABL…...
究竟什么是阻塞与非阻塞、同步与异步
文章目录 前言阻塞与非阻塞同步与异步复杂的网络IO真正的异步IOIO分类与示例总结 前言 这几个名词在程序开发时经常听到，但是突然问起来各个词的含义一时间还真是说不清楚，貌似这几个词都是翻译过来的，每个人的解释都不太一样，我…...
2026离火运下的商业破局 七大反周期赛道深度解码，企业的掘金指南
作为扎根云南本土、服务超 3 万家企业的 AI 营销与数字化转型服务商，我们基于对云南市场 6 年的深耕洞察，深刻理解本土企业在时代浪潮中的机遇与挑战。在 “火马年 离火运” 的宏观趋势下，那些逆周期生长的商业赛道，不仅是全国性…...
合规风暴下的医美机构：数字化转型不是选择题，而是生存题
2026年的医美行业，正经历着一场前所未有的深度洗牌。最新数据显示，仅2026年第一季度，全国已有超过230家医美机构因经营不善而关门歇业。这一数字的背后，是行业从“野蛮生长”向“精细化运营”转型的阵痛。曾经的医美行业被冠以“暴…...
Uniapp+Vue3+Ts 实战：巧用双script标签破解globalData共享与生命周期执行难题
1. 当Uniapp遇上Vue3Ts：globalData共享的困境 最近在帮团队升级Uniapp项目到Vue3TypeScript时，遇到了一个典型问题：App.vue中原本通过export default导出的globalData全局变量，在改用<script setup>语法糖后突然失效了。其他…...
BGE-Reranker-v2-m3推理延迟高？量化压缩部署方案
BGE-Reranker-v2-m3推理延迟高？量化压缩部署方案 在实际RAG系统落地过程中，不少团队反馈：BGE-Reranker-v2-m3虽然排序精度高，但单次推理耗时普遍在300–600ms（A10显卡），批量处理10个候选文档就…...
告别抓瞎！手把手教你用ISO-27145标准解析汽车故障码（附J2012DA表格下载）
告别抓瞎！手把手教你用ISO-27145标准解析汽车故障码（附J2012DA表格下载） 在汽车电子诊断领域，ISO-27145标准就像一本厚重的密码手册，而故障码则是车辆与工程师对话的暗号。每次连接诊断接口，ECU返回的那串十…...
为啥总报NoSuchBeanDefinitionException？)
Spring定时任务踩坑实录：Quartz Job里用SpringApplicationContext.getBean()为啥总报NoSuchBeanDefinitionException？
Spring定时任务深度解析：Quartz Job中Bean获取异常的原理与实战解决方案 在Spring Boot与Quartz整合开发中，许多开发者都遇到过这样的场景：定时任务明明配置正确，却在运行时抛出NoSuchBeanDefinitionException异常，提示…...
微调实战避坑指南：为什么你的PyTorch模型精度上不去？从学习率到冻结层的5个关键点
PyTorch模型微调实战：5个关键技巧突破精度瓶颈 当你在Kaggle竞赛中看到别人用同样的预训练模型却能取得高出3%的准确率时，是否曾怀疑自己遗漏了什么关键步骤？模型微调看似简单，实则暗藏玄机。本文将揭示那些论文中不会提及、但实践…...
抖音内容批量下载神器：告别手动保存的烦恼，一键获取无水印视频
抖音内容批量下载神器：告别手动保存的烦恼，一键获取无水印视频 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and bro…...
3步掌握RePKG：Wallpaper Engine资源处理完整指南
3步掌握RePKG：Wallpaper Engine资源处理完整指南 【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg 你是否曾经想要修改Wallpaper Engine壁纸中的某个元素，却因…...
系统托盘图标终极指南：让System Informer成为你的系统监控利器
系统托盘图标终极指南：让System Informer成为你的系统监控利器 【免费下载链接】systeminformer A free, powerful, multi-purpose tool that helps you monitor system resources, debug software and detect malware. Brought to you by Winsider Seminars & …...