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分类与示例总结 前言 这几个名词在程序开发时经常听到，但是突然问起来各个词的含义一时间还真是说不清楚，貌似这几个词都是翻译过来的，每个人的解释都不太一样，我…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践
6月5日，2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席，并作《智能体在安全领域的应用实践》主题演讲，分享了在智能体在安全领域的突破性实践。他指出，百度通过将安全能力…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
云原生安全实战：API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...
怎么让Comfyui导出的图像不包含工作流信息，
为了数据安全，让Comfyui导出的图像不包含工作流信息，导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo（推荐） 在 save_images 方法中，删除或注释掉所有与 metadata …...
从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码"：Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力，从金融交易到交通管控，这些关乎国计民生的关键领域…...