Canvas 2D API 是实现 HTML5 粒子效果最直接可靠的方式，因其支持实时计算位置、速度、碰撞与生命周期等逻辑，而纯 CSS 或 SVG 仅适用于简单动画；粒子对象须包含 position、velocity、life、size 四个核心属性，缺一不可；每帧必须严格按 clearRect → update → render 顺序执行；鼠标交互需节流并批量初始化粒子，避免性能问题。
Canvas 2D API 是实现 HTML5 粒子效果最直接可靠的方式
纯 CSS 或 SVG 能做简单飘动/缩放粒子，但实时计算位置、速度、碰撞、生命周期等逻辑时，canvas 是唯一实用选择。WebGL（如 Three.js）适合大规模粒子，但小项目引入整套库反而增加复杂度和体积，requestAnimationFrame + canvas.getContext('2d') 组合已足够应对大多数交互动画需求。
粒子对象必须包含 position、velocity、life、size 四个核心属性
漏掉 life 会导致粒子无限存在，内存持续增长；忽略 velocity 就只剩静态点；position 和 size 缺一不可，否则无法绘制。常见错误是把所有粒子共用一个 speed 常量，结果所有粒子同速同向——真实感来自随机初速度与衰减：
const particle = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 4, // -2 ~ +2
vy: (Math.random() - 0.5) * 4,
life: 1.0, // 0.0 ~ 1.0，用于透明度和尺寸衰减
size: Math.random() * 3 + 1
};每帧必须执行 clearRect + update + render 三步，顺序不能颠倒
clearRect 清空上一帧残留，否则产生拖影；update 修改粒子状态（位置、生命值），必须在渲染前完成；render 仅负责绘制，不参与逻辑。容易踩的坑包括：
- 用
canvas.style.background = 'black'替代clearRect→ 拖影严重且性能差 - 在
render中修改particle.life→ 逻辑与视图耦合，难以调试 - 未对
life做边界判断（如life 后重置或剔除）→ 粒子堆积卡顿
标准循环结构应为：
立即学习“前端免费学习笔记（深入）”；
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
p.life -= 0.01;
if (p.life <= 0) resetParticle(p);
});
particles.forEach(p => {
ctx.globalAlpha = p.life;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
ctx.fill();
});
requestAnimationFrame(animate);
}鼠标交互触发粒子爆发时，注意事件节流与批量初始化
监听 mousemove 直接生成粒子会爆炸式创建（每秒上百个），导致瞬间卡顿。click 或 mousedown 更可控，但仍需限制单次最大数量（如 ≤ 50）。关键点：
- 用
setTimeout或performance.now()实现简单节流，避免高频触发 - 不要在事件回调里逐个
new Particle()，改用Array.from({length: n}, () => createParticle()) - 粒子初始速度建议基于鼠标移动方向微调，而非全随机，增强指向反馈感
例如点击时生成 30 个朝向鼠标的粒子：
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
for (let i = 0; i < 30; i++) {
particles.push({
x,
y,
vx: (Math.random() - 0.5) * 6 + (x - centerX) * 0.05,
vy: (Math.random() - 0.5) * 6 + (y - centerY) * 0.05,
life: 1.0,
size: Math.random() * 2 + 1
});
}
});粒子系统真正难的不是画点，而是控制密度、衰减节奏和重用机制。几十个粒子写死参数就能跑，上千个时，life 的衰减斜率、size 与 alpha 的映射关系、是否启用简单碰撞或边界反弹，每个细节都会影响最终观感和流畅度。
