canvas粒子运动核心是位置、速度、加速度构成的动态逻辑链：位置由速度更新，速度由加速度更新，需结合deltatime确保跨设备稳定，并通过力计算（如鼠标斥力、目标追踪）和阻尼衰减实现真实感行为。
Canvas 绘制动态粒子群，核心不在画得多炫，而在粒子“怎么动”——位置是结果，速度是变化率，加速度是变化的变化率。三者构成运动逻辑链，缺一不可。
位置更新：每一帧的落点由速度和加速度共同决定
粒子的位置（x, y）不是静态值，而是随时间持续演化的变量。最基础的更新方式是：
- 仅靠速度：x += vx; y += vy —— 适合匀速直线运动，比如粒子匀速飞向目标
- 引入加速度：vx += ax; vy += ay; 然后 x += vx; y += vy —— 模拟重力、斥力、牵引等真实感行为
- 注意时间步长：直接用帧率（如 60fps ≈ 16.6ms/帧）做增量虽简单，但设备性能不一时易飘移；更稳的做法是传入上一帧到当前帧的毫秒差（deltaTime），再按比例缩放：x += vx * deltaTime / 16;
速度设计：方向与大小必须可分解、可叠加
Canvas 坐标系中，所有运动最终都要拆成 x 和 y 两个分量。常见做法有：
- 直接设定分量：vx = 2; vy = -1.5; —— 适合预设轨迹或简单交互（如鼠标推开）
- 用角度+速率生成：vx = Math.cos(angle) * speed; vy = Math.sin(angle) * speed; —— 适合发射类效果（喷泉、爆炸）
- 受力叠加：每帧计算多个影响源（如鼠标引力、边界排斥、粒子间连接力），分别得出 Δvx、Δvy，再累加到当前速度上
加速度应用：不是“越快越好”，而是“该变才变”
加速度本质是力的体现。Canvas 粒子系统里，它通常不写死，而是动态计算：
- 鼠标跟随/排斥：算出粒子到鼠标的距离和方向，若距离小于阈值，则朝鼠标（或反方向）施加加速度，大小与距离成反比
- 目标追踪：粒子有目标点（tox, toy），加速度指向目标：ax = (tox - x) * 0.02; ay = (toy - y) * 0.02;
- 阻尼处理：为避免粒子越跑越快，常在更新末尾乘以衰减系数：vx *= 0.98; vy *= 0.98;
实际代码片段示意（精简版）
一个典型 update() 方法会像这样组织逻辑：
Particle.prototype.update = function(mouse, deltaTime) {
// 1. 计算鼠标作用力（斥力）
const dx = this.x - mouse.x;
const dy = this.y - mouse.y;
const dist = Math.sqrt(dx*dx + dy*dy);
if (dist // 2. 更新速度（含阻尼）
this.vx += this.ax <em> deltaTime / 16;
this.vy += this.ay </em> deltaTime / 16;
this.vx <em>= 0.97;
this.vy </em>= 0.97;<p>// 3. 更新位置
this.x += this.vx <em> deltaTime / 16;
this.y += this.vy </em> deltaTime / 16;</p><p>// 4. 清零本轮加速度（为下一帧准备）
this.ax = 0;
this.ay = 0;
};</p>
