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分类与示例总结 前言 这几个名词在程序开发时经常听到，但是突然问起来各个词的含义一时间还真是说不清楚，貌似这几个词都是翻译过来的，每个人的解释都不太一样，我…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT，橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版：职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...
【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)
前言： 双亲委派机制对于面试这块来说非常重要，在实际开发中也是经常遇见需要打破双亲委派的需求，今天我们一起来探索一下什么是双亲委派机制，在此之前我们先介绍一下类的加载器。 目录 编辑 前言： 类加载器 1. …...