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分类与示例总结 前言 这几个名词在程序开发时经常听到，但是突然问起来各个词的含义一时间还真是说不清楚，貌似这几个词都是翻译过来的，每个人的解释都不太一样，我…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
安卓基础（aar）
重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC？ WebRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
《Docker》架构
文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器，docker，镜像，k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...
Python常用模块：time、os、shutil与flask初探
一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...
命令行关闭Windows防火墙
命令行关闭Windows防火墙 引言一、防火墙：被低估的"智能安检员"二、优先尝试！90%问题无需关闭防火墙方案1：程序白名单（解决软件误拦截）方案2：开放特定端口（解决网游/开发端口不通）三、命令行极速关闭方案方法一：PowerShell（推荐Win10/11）方法二：CMD命令…...