简易粒子引擎基于Canvas 2D API实现，含粒子状态管理、requestAnimationFrame循环渲染、鼠标交互及可配置接口，轻量可控且无需第三方库。

直接手写一个简易粒子引擎，比引入完整库更可控、更轻量，也更适合理解底层逻辑。核心就是用 Canvas 2D API 模拟粒子的生成、更新和绘制，不依赖任何第三方库，几小时就能跑通基础版本。

粒子数据结构与初始化

每个粒子本质是一个带状态的对象，关键属性包括位置、速度、大小、颜色、生命周期。初始化时批量生成，避免运行时频繁创建对象：

• 用数组统一管理所有粒子实例，便于批量更新
• 位置（x/y）和速度（vx/vy）用浮点数，支持平滑运动
• 添加 age 和 life 属性，控制存活时间，到期自动回收
• 颜色建议用 rgba 字符串，方便动态调整透明度

Canvas 渲染循环与性能优化

使用 requestAnimationFrame 驱动主循环，每帧执行“更新 + 绘制”两步。关键细节在于避免重绘开销：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 清空画布用 ctx.clearRect(0, 0, width, height)，比 fillRect 更快
• 粒子绘制优先用 ctx.beginPath() + ctx.arc() + ctx.fill()，比 drawImage 轻量
• 关闭抗锯齿 ctx.imageSmoothingEnabled = false，提升小圆点绘制效率
• 粒子数量控制在 200–500 之间，兼顾效果与帧率（60fps）

基础交互：鼠标影响粒子行为

监听 mousemove 获取坐标，让粒子产生吸引或排斥反应：

立即学习“Java免费学习笔记（深入）”；

• 计算粒子到鼠标的距离，设定作用半径（如 120px）
• 距离越近，施加的力越大；超出半径则忽略
• 力的方向由鼠标指向粒子（排斥）或反之（吸引）
• 速度叠加后做简单限幅，防止粒子飞出视野

可扩展的配置接口

把参数抽成配置对象，方便复用和调试：

• 粒子总数、初始速度范围、大小区间、颜色数组
• 鼠标交互开关、作用力强度、是否启用连线
• 生命周期范围、透明度衰减方式（线性/指数）
• 暴露 init()、start()、stop() 方法，便于集成到 Vue/React 中