Canvas粒子动画鼠标追踪效果原理与实现

最近手头的一个小项目正好用到了Canvas粒子动画，做了一个鼠标追踪的交互效果，效果出来之后确实挺惊艳的。这类效果在个人主页、活动页面、产品引导页里都很常见，尤其是那种粒子跟着鼠标游走、互相连线的视觉，看起来很有科技感。很多朋友看到之后问我这个是怎么实现的，所以这次我把整个实现过程完整拆一遍，从原理到代码到性能优化，一步不漏。无论你是Canvas零基础的新手，还是已经写过一些动画想进阶的开发者，这篇文章都适合你——读完你不仅能自己写出一个粒子追踪效果，还能应付各种变形需求，比如电流效果、线段锚点吸附、粒子跟随拖拽等等。

先说清楚，这篇文章不是只给你贴一段能跑的代码就完事，而是要把粒子动画背后的设计思路、渲染机制、性能瓶颈全部讲透。很多初学者拿到一段粒子代码能跑，但改一改就崩，或者一加功能就卡。这些问题本质上都是没理解Canvas渲染管线和粒子对象生命周期。所以我会从最底层的原理开始，带你一步步把整个效果build起来。

1. 粒子追踪效果的整体设计与核心思路

1.1 一个粒子动画效果到底由哪些部分构成

拆开来看，任何一个Canvas鼠标追踪粒子效果，都可以分成四个核心部分：粒子系统本身、运动逻辑、渲染绘制、鼠标交互。这四个部分各自负责不同的事，但它们之间是环环相扣的。

粒子系统本身很好理解，就是一堆粒子对象的集合。每个粒子是一组数据的载体，包含位置、速度、大小、颜色、寿命等属性。运动逻辑决定粒子每一帧如何改变自己的位置，比如按固定速度匀速移动、受重力影响、弹性衰减、或者朝鼠标方向加速。渲染绘制决定粒子画出来长什么样——一个圆点、一条短线、一个渐变光晕还是多条连线。鼠标交互则是捕获鼠标坐标，并把这个坐标用于粒子的运动影响或连线绘制。

我见过不少半路出家的写法，把粒子数据和绘制逻辑写在一个大函数里，循环嵌套循环，最后渲染出来的效果也能看，但代码根本没法扩展，加个新需求就得重写。正确的做法是数据与渲染分离。粒子数据就是纯粹的对象，渲染层只负责读数据、画图像；运动逻辑只负责改数据。这样后面想加拖拽、加速、融合、爆炸效果，你只需要新增一个逻辑函数，渲染层完全不用动。

1.2 为什么选Canvas而不是CSS或SVG

做粒子动画不是只有Canvas一条路，很多新手会问，CSS动画和SVG能不能做？CSS的transition和animation做简单位移动画没问题，但粒子系统每一帧可能涉及几十上百个对象的独立运动、透明度变化、相互间的动态连线，CSS动画根本管理不过来，而且CSS连续修改样式会造成大量重排重绘。SVG的DOM节点数量一旦多了，浏览器也没法稳定流畅运行。

Canvas的优势在于像素级操作和批处理渲染。它把图形直接画在画布上，不产生额外的DOM节点，绘制一帧只需一次重绘，性能开销远小于几十个DOM节点各自变化。再搭配requestAnimationFrame做逐帧驱动，浏览器会在每一帧刷新前回调一次你的绘制函数，保证动画和屏幕刷新率同步，画面丝滑无撕裂。

实际项目里，如果你要做的是高性能的粒子特效、游戏特效，Canvas 2D是性价比最高的方案。如果你要求几十万级别的粒子，那可能要考虑WebGL用GPU渲染，但那是另一个量级的话题，多数页面交互型粒子用Canvas 2D就够了。

1.3 我们需要实现的功能清单

在动手写代码之前，建议先把功能边界定清楚，避免写着写着什么都想往上堆。以这个鼠标追踪效果为例，核心功能如下：

• 画布上生成一定数量的粒子，粒子在画布区域里自由漂浮。
• 粒子之间有连线效果：当两个粒子距离小于阈值时画一条半透明的线，距离越近线越亮。
• 粒子与鼠标之间也遵循同样的连线规则：鼠标靠近粒子时，粒子和鼠标之间产生连线。
• 鼠标移动对粒子产生轻微影响，比如粒子会朝鼠标方向轻微加速，或者鼠标经过时粒子被推开，形成交互感。
• 支持粒子数量、连线距离、粒子速度等参数配置。
• 性能可控：在高分屏和低端设备上都能稳定运行。

功能和参数先定下来，后面写代码就有明确目标，不会越写越偏。菜单里的参数也可以做成可调的，方便在视觉和性能之间找平衡。

2. 核心细节解析：粒子对象设计、速度与坐标计算

2.1 粒子对象的数据结构设计

粒子的数据结构是整个系统的地基。代码写得再好，数据结构不合理就会到处打补丁。我的推荐设计如下，每一个字段都有明确用途：

javascript复制class Particle {
  constructor() {
    this.x = 0;          // 当前位置x
    this.y = 0;          // 当前位置y
    this.vx = 0;         // x方向速度
    this.vy = 0;         // y方向速度
    this.size = 2;       // 粒子半径
    this.alpha = 1;      // 粒子透明度，用于渐入渐出
    this.life = 0;       // 已存活时间（帧数）
    this.maxLife = 0;    // 最大存活时间，用于粒子消亡和重生的逻辑
  }
}

这个结构看着简单，但在实际运行中非常稳定。特别要注意的是life和maxLife这两个字段。很多粒子系统不是永生的，粒子有生命周期，到时间就消失，或者在边界处被重置。这样设计才能适应后续扩展，比如你要做一个粒子拖尾消散效果，直接根据life/maxLife计算透明度就能实现。

你可能会注意到，我没有在粒子对象里存颜色。这是因为这个效果里所有粒子颜色相同，如果每个粒子都存一个颜色字符串，会产生大量字符串垃圾，GC压力大。如果确实需要每个粒子颜色不同，我建议存RGB三个数值，而不是字符串。绘制的时候拼成rgba(r, g, b, alpha)，性能会好很多。这是一个很隐蔽但很实用的细节。

2.2 粒子的速度、生命值、随机化参数计算

粒子的位置更新是最基本的逻辑。每一帧按速度移动位置，就像物理课上的匀速直线运动：

javascript复制particle.x += particle.vx;
particle.y += particle.vy;

但直接这样写有个问题——粒子的运动永远不变，画面会很死板。所以需要给粒子加入摩擦力或阻尼，让粒子速度逐渐衰减；同时加入随机扰动，让粒子的轨迹更自然：

javascript复制const friction = 0.98;
particle.vx *= friction;
particle.vy *= friction;

particle.vx += (Math.random() - 0.5) * 0.1;
particle.vy += (Math.random() - 0.5) * 0.1;

这里摩擦系数0.98是经验值。0.98意味着每帧速度保留98%，约一秒后速度衰减到原来的0.98^60 ≈ 0.30，也就是剩三成。如果想要粒子运动更持久，可以调到0.99；想让粒子快速停下，可以调到0.95。这个参数直接影响粒子的漂浮手感，我建议做成可配置的。

还有两种方向的随机化策略。生成粒子时的均匀散布最好用Math.random()乘以宽高，就是均匀随机。如果想要粒子密集分布在某个区域，可以用正态分布或者中心发射的方式。比如做鼠标追踪时，很多效果是鼠标移动时连续喷射粒子，鼠标经过的轨迹上不断生成新粒子，这些粒子的初始速度带有发射角。这时候速度就要用极坐标计算：

javascript复制const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 2 + 1;
particle.vx = Math.cos(angle) * speed;
particle.vy = Math.sin(angle) * speed;

这个写法的好处在于速度分布均匀且可控。你在Math.random()后面乘的系数和加的数，决定了速度的区间。后面做电流效果时也要用这个逻辑。

2.3 鼠标交互与坐标计算的几个关键点

鼠标追踪效果的核心交互在于鼠标坐标与粒子坐标之间的距离判断。这里有几个细节很容易踩坑。

第一个坑是坐标转换。如果你用了CSS把canvas拉伸了，或者canvas本身有样式尺寸和绘图尺寸的差异，直接用offsetX和offsetY会导致粒子和鼠标对不上。我推荐用getBoundingClientRect和坐标差来计算：

javascript复制const rect = canvas.getBoundingClientRect();
mouse.x = (event.clientX - rect.left) * (canvas.width / rect.width);
mouse.y = (event.clientY - rect.top) * (canvas.height / rect.height);

canvas.width / rect.width这个比值就是为了解决高分辨率屏幕和CSS缩放带来的坐标偏差问题。如果你的canvas没有缩放，这个比值是1，但写上这个代码之后，任何缩放情况下都不会错位。

第二个坑是鼠标移出画布的状态。鼠标移出后，如果不处理，最后的坐标会停留在边缘位置，导致粒子一直和边缘连线，画面看起来很奇怪。建议监听mouseleave事件，把鼠标坐标设为一个极大负值，或者用一个独立的布尔值mouse.active标记当前鼠标是否在画布内。判断连线逻辑时先检查这个标记。

第三个坑是帧率与移动之间的配合。mousemove事件触发的频率远高于requestAnimationFrame的刷新率，不需要在事件回调里做任何计算，只需要把坐标存下来，等动画循环里读。如果你在mousemove里面直接创建粒子，事件高频触发时会产生大量粒子，把性能拖垮。正确的做法是在事件回调里只更新坐标，真正生成粒子的逻辑放在下一帧的动画循环中统一处理。这样做还有一个好处，就是逻辑全集中在同一个地方，排查问题方便。

2.4 连线算法的取舍与性能考量

粒子连线是这个效果最出彩的部分。通常的做法是两两粒子之间距离小于阈值就绘制一条半透明的线。这个逻辑直观，但有一个致命问题：复杂度是O(n²)。假设200个粒子，每帧要计算19900对距离，对每对还要判断是画还是不画，计算量非常可观。到400个粒子就是79800对，基本会卡顿。

我在实战中会做几个取舍：

第一，不是所有粒子都要彼此连线，可以只让粒子与鼠标坐标连线，同时再绘制粒子之间的近距离连线。具体策略可以做成可配置项。

第二，距离计算可以用平方距离，不进行开方操作。因为开平方比乘方慢很多，而判断阈值时只需要比较距离平方和阈值平方即可，效果完全一样。这个优化的收益在粒子数量大时非常明显。

第三，可以将连线距离阈值控制在合理范围。阈值越短需要计算的连线越少，视觉上也会更清爽。很多效果看着乱，就是阈值设置太长，密密麻麻全是线。

第四，也是性价比最高的一步——空间网格优化。把画布分成若干网格，每个粒子只和同格子以及相邻格子里的粒子计算距离，而不是和所有粒子计算。这样O(n²)就能降为近似O(n)。如果你的粒子数量能到1000+，这个优化是必须做的。

空间网格的示例思路如下：

javascript复制const gridSize = 80; // 网格边长，略大于连线阈值即可
const grid = {};

function getGridKey(x, y) {
  const gx = Math.floor(x / gridSize);
  const gy = Math.floor(y / gridSize);
  return `${gx},${gy}`;
}

// 每帧更新
for (const particle of particles) {
  const key = getGridKey(particle.x, particle.y);
  (grid[key] ||= []).push(particle);
}

// 查找附近的粒子：检查当前格子和周围8个格子
function getNearbyParticles(particle) {
  const gx = Math.floor(particle.x / gridSize);
  const gy = Math.floor(particle.y / gridSize);
  const result = [];
  for (let dx = -1; dx <= 1; dx++) {
    for (let dy = -1; dy <= 1; dy++) {
      const key = `${gx + dx},${gy + dy}`;
      if (grid[key]) result.push(...grid[key]);
    }
  }
  return result;
}

实际上，如果你限制在120个粒子以内，而且连线阈值不高，不做网格优化也能跑得很流畅。所以我建议先按最简单的两两遍历写版本，跑起来后再加优化。过早优化会让你陷入性能调优的细节，反而忽略主体逻辑。

3. 实操过程：从零搭建粒子追踪效果

3.1 页面结构与基础环境搭建

现在开始写代码。整个过程不依赖任何框架，一个纯HTML文件就能跑起来。首先准备好Canvas和基础样式。

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas粒子鼠标追踪</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #0b0e14;
      overflow: hidden;
    }
    #canvas {
      display: block;
      width: 100%;
      height: 100%;
      cursor: crosshair;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="particle.js"></script>
</body>
</html>

这里有几个细节：background用深色背景是因为浅色背景上粒子线条的对比度不够；overflow: hidden防止页面出现滚动条影响视觉；cursor: crosshair给用户一个精准瞄准的视觉反馈，增强交互感。这些细节看起来小，但对整体体验影响很大。

3.2 实现粒子的生成与更新逻辑

接下来是粒子逻辑。我直接用原生JavaScript实现，不用Class而是用普通对象，原因后面会在性能优化部分说。

javascript复制const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let width = window.innerWidth;
let height = window.innerHeight;

// 高分屏适配
const DPR = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = width * DPR;
canvas.height = height * DPR;
ctx.scale(DPR, DPR);

// 配置参数
const CONFIG = {
  particleCount: window.innerWidth < 768 ? 50 : 120,
  maxDistance: 150,
  particleSpeed: 0.5,
  fps: 60
};

// 鼠标状态
const mouse = {
  x: -9999,
  y: -9999,
  active: false
};

// 粒子数组
let particles = [];

function createParticle(hasVelocity = true) {
  const particle = {
    x: Math.random() * width,
    y: Math.random() * height,
    vx: hasVelocity ? (Math.random() - 0.5) * CONFIG.particleSpeed * 2 : 0,
    vy: hasVelocity ? (Math.random() - 0.5) * CONFIG.particleSpeed * 2 : 0,
    size: Math.random() * 1.5 + 0.5,
    alpha: Math.random() * 0.5 + 0.4,
    life: 0,
    maxLife: Math.random() * 240 + 120
  };
  return particle;
}

function initParticles() {
  particles = Array.from({ length: CONFIG.particleCount }, () => createParticle());
}

这里一个值得留意的细节是DPR的处理。如果你不设置DPR，在Retina屏幕上canvas的绘图尺寸和物理像素尺寸不一致，画出来的线条和粒子会发虚。我把DPR限制最大为2，是因为超过2以后肉眼基本分辨不出差异，但渲染开销会显著上升。尤其移动端设备DPR动辄3甚至更高，不做上限会导致性能急剧下降。

maxLife和alpha的用意是这样的：为了让粒子不是永远活着（这样边界处会积累很多粒子），我让每个粒子有一个持续时间，寿命耗尽后重新在随机位置生成。同时透明度初始就带有随机差异，让粒子群有层次感。

更新逻辑写成独立函数，所有粒子的运动都在这里处理：

javascript复制function updateParticles() {
  for (let i = 0; i < particles.length; i++) {
    const p = particles[i];

    // 位置更新
    p.x += p.vx;
    p.y += p.vy;

    // 阻尼，模拟空气阻力
    p.vx *= 0.96;
    p.vy *= 0.96;

    // 微小的随机扰动，让运动更自然
    p.vx += (Math.random() - 0.5) * 0.05;
    p.vy += (Math.random() - 0.5) * 0.05;

    // 鼠标吸引效果：粒子在鼠标附近会被轻微吸附
    if (mouse.active) {
      const dx = mouse.x - p.x;
      const dy = mouse.y - p.y;
      const distSq = dx * dx + dy * dy;
      const maxRadius = 180;
      if (distSq < maxRadius * maxRadius) {
        const dist = Math.sqrt(distSq);
        const force = (1 - dist / maxRadius) * 0.02;
        p.vx += (dx / dist) * force;
        p.vy += (dy / dist) * force;
      }
    }

    // 边界碰撞反弹，并给一次随机速度
    if (p.x < 0 || p.x > width) {
      p.vx *= -0.8;
      p.x = Math.max(0, Math.min(width, p.x));
    }
    if (p.y < 0 || p.y > height) {
      p.vy *= -0.8;
      p.y = Math.max(0, Math.min(height, p.y));
    }

    // 生命周期管理
    p.life++;
    if (p.life > p.maxLife) {
      Object.assign(p, createParticle(false));
      p.life = 0;
    }
  }
}

鼠标吸引的实现值得展开讲一下。这里力的大小不是固定值，而是和距离相关的，距离越近力越大。(1 - dist / maxRadius)计算出0到1之间的强度系数，距离0的时候系数是1，距离到达180时系数是0。这样鼠标靠近时粒子会被轻轻拉过来，但是又不会一下子撞到鼠标上，形成一种柔和的追随感。这个手感是调出来的，0.02这个值我试过0.005到0.08，太小了感觉不到吸引，太大了粒子全糊在鼠标周围，0.02左右比较合适。

3.3 绘制粒子与距离连线效果

接下来是核心部分——绘制。这部分的视觉表现直接决定这个效果的好坏。我分三步来画：先画粒子之间的连线，再画粒子与鼠标之间的连线，最后画粒子本身。

javascript复制function draw() {
  ctx.clearRect(0, 0, width, height);

  // 1. 画粒子之间的连线
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const p1 = particles[i];
      const p2 = particles[j];
      const dx = p1.x - p2.x;
      const dy = p1.y - p2.y;
      const distSq = dx * dx + dy * dy;
      const maxDistSq = CONFIG.maxDistance * CONFIG.maxDistance;

      if (distSq < maxDistSq) {
        const dist = Math.sqrt(distSq);
        const alpha = 1 - dist / CONFIG.maxDistance;
        ctx.strokeStyle = `rgba(0, 180, 255, ${alpha * 0.6})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
      }
    }
  }

  // 2. 画粒子与鼠标之间的连线
  if (mouse.active) {
    for (const p of particles) {
      const dx = p.x - mouse.x;
      const dy = p.y - mouse.y;
      const distSq = dx * dx + dy * dy;
      const maxDistSq = CONFIG.maxDistance * 1.2 * (CONFIG.maxDistance * 1.2);

      if (distSq < maxDistSq) {
        const dist = Math.sqrt(distSq);
        const alpha = 1 - dist / (CONFIG.maxDistance * 1.2);
        ctx.strokeStyle = `rgba(120, 200, 255, ${alpha * 0.8})`;
        ctx.lineWidth = 1.2;
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(mouse.x, mouse.y);
        ctx.stroke();
      }
    }
  }

  // 3. 画粒子本身
  for (const p of particles) {
    ctx.fillStyle = `rgba(255, 255, 255, ${p.alpha})`;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
    ctx.fill();
  }
}

几个容易出问题的细节：

ctx.strokeStyle是字符串拼接，每帧会创建大量字符串对象。如果粒子数量较多，这可能会带来GC压力。优化方案是预先计算好几种透明度对应的颜色字符串，直接复用。不过对120个粒子来说，影响不大，理解为主，后续优化时再加。

线条透明度算法是1 - dist / maxDistance，距离为0时alpha为1，距离等于阈值时alpha为0.6（因为乘了0.6），这样淡出效果是渐变的。如果直接用线性衰减，远处粒子突然消失，视觉上会有明显的"断裂感"。用线性渐变可以让线条淡出得比较自然。

鼠标连线的阈值比粒子之间的阈值略大（乘以1.2），这是为了让鼠标与粒子之间的连线看起来更灵敏。鼠标是交互的焦点，连线可以覆盖更多粒子，视觉反馈更强。

3.4 动画主循环与事件监听

所有部分准备好之后，需要一个主循环把这些串起来：

javascript复制function animate() {
  updateParticles();
  draw();
  requestAnimationFrame(animate);
}

// 窗口尺寸变化
function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width * DPR;
  canvas.height = height * DPR;
  ctx.scale(DPR, DPR);
}

// 事件监听
window.addEventListener('resize', resize);
window.addEventListener('mousemove', (e) => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
  mouse.active = true;
});
window.addEventListener('mouseleave', () => {
  mouse.active = false;
  mouse.x = -9999;
  mouse.y = -9999;
});

initParticles();
animate();

这里我用requestAnimationFrame而不是setInterval，理由是帧率和浏览器刷新率同步。浏览器通常在60Hz刷新率下每秒回调60次，在120Hz的设备上就是120次，动画一定会流畅。而setInterval无论是设16ms还是33ms都不精确，实际运行时还会遇到掉帧和累积延迟的问题。这里有一个细节是mousemove事件要在window上监听而不是canvas上监听，这样鼠标快速移到画布外再移回来时，中间过程不会丢坐标。虽然用canvas监听也能有同样效果，但在某些情况下画布和窗口之间如果有边距或边框，鼠标悬停在边框上会被判定为离开，导致交互闪烁。

窗口尺寸变化时，注意要先更新width和height两个变量，再更新canvas的实际width和height属性。因为canvas的width/height属性一旦被设置，画布内容会清空，而且坐标系统也随之变化。先用新尺寸重新绘制，否则会出现一帧错位。

4. 常见问题排查与性能优化实战

4.1 为什么我的canvas画出来是模糊的

这是最常被问的问题。绝大多数原因是没有处理设备像素比DPR。默认情况下，一个宽度为100%的canvas，我们读取到的canvas.width是CSS像素值，但物理屏幕上一个CSS像素可能对应2个或3个物理像素。如果你直接用CSS像素作为绘图尺寸，浏览器会把300px宽的canvas拉伸到600px宽的物理区域，每个像素被放大两倍，就模糊了。

解决办法就是我前面写的DPR适配。

javascript复制const DPR = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = width * DPR;
canvas.height = height * DPR;
ctx.scale(DPR, DPR);

后面所有绘图操作仍然使用CSS像素坐标，ctx.scale(DPR, DPR)把坐标系放大了，所有绘制内容自动匹配物理分辨率。为什么限制DPR最大为2？因为再高的DPR对视觉提升很小，但GPU负载成倍增加。尤其粒子数量多的时候，高DPR设备上一旦不做限制，帧率会从60掉到30以下。

4.2 粒子数量增加后卡顿怎么办

这是第二个常见问题。卡顿主要由三个因素造成：粒子数量多、粒子对距离计算多、绘制线条和圆形次数多。

首先排查粒子数量是否合理。120个粒子在低端手机上其实已经接近极限了，如果目标是中低端机型，建议降到80甚至60。然后排查连线距离计算。如果粒子数量是n，两两配对的复杂度是O(n²)，我前面提到的空间网格算法可以解决这个问题。如果确定了不优化两两遍历，另一个办法就是限制每个粒子最多只能与其他几个粒子连线，只找出最近的那几个。这个策略实现起来也不复杂，而且效果上和全连线差别不大，因为远距离的线本来就淡到几乎看不见。

绘制层面的优化有三个手段。第一个是减少渐变或阴影的使用。很多教程喜欢在粒子上加shadowBlur来制作光晕效果，这个属性极其消耗性能，本质是额外的模糊计算。要想粒子发光效果，可以改用多个同心圆叠加画出光晕，视觉上类似但性能好很多。第二个是合并绘图路径。例如所有粒子都是同一个颜色、同一个尺寸，就可以用一个Path2D把所有粒子圆形都装进去，最后一次性fill出来，大幅减少canvas API调用次数。第三个是对象池。频繁创建和销毁粒子对象会产生大量GC，通过复用对象可以减少垃圾回收的停顿。

javascript复制// 对象池优化示例：粒子重用而非重建
function resetParticle(p, withRandomPos = true) {
  p.x = withRandomPos ? Math.random() * width : p.x;
  p.y = withRandomPos ? Math.random() * height : p.y;
  p.vx = (Math.random() - 0.5) * CONFIG.particleSpeed * 2;
  p.vy = (Math.random() - 0.5) * CONFIG.particleSpeed * 2;
  p.size = Math.random() * 1.5 + 0.5;
  p.alpha = Math.random() * 0.5 + 0.4;
  p.life = 0;
  p.maxLife = Math.random() * 240 + 120;
}

对象池的思路是初始化时就创建好固定数量的粒子对象，运行期间永远不会增加也不会减少，只是不断重置状态。这样避免了内存分配和垃圾回收带来的卡顿。这也是我在前面没有用class而是用普通对象的原因之一——普通对象在重置时无构造函数调用成本，V8引擎下对象字段结构稳定还能享受隐藏类的优化。

4.3 移动端触摸支持怎么加

鼠标追踪效果在移动端需要适配触摸事件才能正常工作。如果完全不管，手机上打开页面是一堆粒子漂浮但没有交互，效果会大打折扣。加触摸支持其实不复杂，核心逻辑和鼠标事件类似，只是事件名换成touchmove。

javascript复制window.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  mouse.x = touch.clientX;
  mouse.y = touch.clientY;
  mouse.active = true;
}, { passive: false });

window.addEventListener('touchend', () => {
  mouse.active = false;
  mouse.x = -9999;
  mouse.y = -9999;
});

这里有一个很关键的坑：touchmove事件的passive必须为false，否则无法调用preventDefault()，浏览器会默认滚动页面，交互效果会被页面滚动打断。加了preventDefault()以后，整个页面不能滚动了，如果你页面本身有滚动需求，需要根据自己的场景调整（比如判断滚动区域元素后再决定是否阻止）。

另一个问题是移动端粒子数量应该比桌面端更少。手机屏幕小、GPU弱，建议在判断设备类型时动态设置粒子数量。我用的判断方法是navigator.maxTouchPoints > 0，这个判断在绝大多数手机上有效。或者更直接地，用window.innerWidth < 768判断屏幕尺寸来设置不同档位。

4.4 常见问题速查表

我把实战中遇到的典型问题整理成了表格，方便后面排查对照。

4.5 火候控制与电/流动线变体

原始效果跑通之后，可以试着在配色、粒子速度、连线阈值上做不同尝试。我调整过几版，最常用的是蓝白配色，深色背景配上电光蓝的线条，科技感强。如果你想要火焰效果，可以把颜色改成橙色到红色的渐变，粒子速度稍快，连线阈值缩短。想要星空效果，就把粒子数量和尺寸调低，透明度压低，背景改成深紫。

顺着这套粒子系统推演，可以变形出很多效果，比如热词里提到的电流效果。思路是把两两之间的直线连线改成二次贝塞尔曲线，以两个粒子中点为基准，垂直于连线方向加一个随机偏移，然后画一条曲线。多条曲线叠加后，就像电流在粒子之间窜动。再配合粒子沿电流路径运动，就是完整的"canvas电流效果"。还有一个方向是线段锚点工具——在粒子系统里加入可拖拽的锚点，粒子可以吸附到锚点，锚点之间用贝塞尔曲线连接，拖动锚点时曲线实时更新，这个常用于地图编辑器和图形设计工具里做路径绘制。

javascript复制// 电流效果的绘制核心：贝塞尔连线
function drawLightningLine(ctx, x1, y1, x2, y2, offsetMagnitude) {
  const mx = (x1 + x2) / 2;
  const my = (y1 + y2) / 2;
  const dx = x2 - x1;
  const dy = y2 - y1;
  const len = Math.sqrt(dx * dx + dy * dy);
  if (len === 0) return;
  const nx = -dy / len;
  const ny = dx / len;
  // 随机偏移中点，形成电流扭曲感
  const offset = (Math.random() - 0.5) * offsetMagnitude;
  const cx = mx + nx * offset;
  const cy = my + ny * offset;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.quadraticCurveTo(cx, cy, x2, y2);
  ctx.stroke();
}

这些变体本质上都是同一套粒子框架——数据驱动、渲染分离、逐帧更新。核心代码不用大改，只要改绘制函数和运动逻辑就行。这也是最初坚持做数据与渲染分离的最大回报：扩展成本非常低。

5. 一些个人体会和后续扩展建议

做这类交互效果，我从一开始就坚持三个原则：性能优先、数据渲染分离、参数可配置。这套原则帮我省了很多后续迭代的时间。比如给需求加一个"粒子变大"的交互效果，我只需要在鼠标靠近时动态修改粒子的size字段，渲染层自动响应，不需要去动绘制代码。

在实际使用中，我的个人体验是：不要过分追求粒子数量和复杂度。很多炫酷效果是设计师提供的静态mock把视觉拉满了，但到了真机上一跑就发热掉帧。一个好的交互效果，应该是在常规配置设备上都能稳定60帧。如果拿不准，就按120个粒子、150px连线距离开始，然后真机测试，卡就降参数。

另外还有一个隐蔽但重要的小技巧：粒子动画在后台标签页运行时，requestAnimationFrame会自动暂停，这是浏览器节约资源的行为。如果你需要后台继续运行，比如做一些统计数据上报或者定时任务，就要考虑用setInterval或Web Worker兜底。但纯展示型粒子效果完全不需要后台运行，浏览器自动暂停反而帮我们节约了资源。

如果你打算把这个项目做大一点，后续可以从这几个方向扩展：做一个属性面板实时调整粒子参数（颜色、数量、速度、连线距离），相当于一个可视化编辑器；加入WebGL渲染器作为Canvas 2D的替代，大幅提升粒子容量；把粒子的位置数据上传到远程，实现多人协同的粒子交互墙；或者加上音效反馈，鼠标移动时粒子跟随音效节奏脉动。

有一次我在一个活动页面上做了这个粒子追踪效果，配合页面主视觉强化品牌感，用户反馈挺好的。但我也遇到过一个情况：粒子背景在暗色设计里看着很高级，换成浅色页面就失真了。所以如果做通用组件，记得把配色和透明度都参数化，不要写死颜色。

最终这个项目，你能从里面拿走的，不只是这段像素动画代码，更重要的是理解Canvas渲染的思维模型——如何组织数据、如何驱动帧循环、如何做性能取舍。这个思维模型在你以后做图表、做游戏、做数据可视化时都用得上。