粒子系统在JavaScript中是一种基于requestAnimationFrame和Canvas 2D/WebGL的手写循环编程模式，核心是初始化、更新状态、重绘三步，需控制数量、清空画布、使用deltaTime及边界重置。
粒子系统在 JavaScript 中本质是什么？
它不是浏览器内置 API，也不是某个标准库，而是一种基于 requestAnimationFrame + Canvas 2D（或 WebGL）持续更新并绘制大量小对象的编程模式。每个“粒子”通常只是带位置、速度、加速度、颜色、半径等属性的普通 JS 对象，系统本身由你手写的循环逻辑驱动。
用 Canvas 2D 实现基础粒子动画的关键步骤
避开框架（如 p5.js、three.js），从零写一个可运行的粒子效果，核心在于三件事：初始化粒子数组、每帧更新状态、每帧重绘。容易卡在「动不起来」或「越来越慢」——多数是因为没控制粒子数量或没清空画布。
-
canvas.getContext('2d')必须复用，不要每帧都调用 - 清空画布用
ctx.clearRect(0, 0, canvas.width, canvas.height)，别用ctx.fill()覆盖背景（会残留） - 粒子位置更新需结合时间差（
deltaTime），否则帧率波动会导致速度忽快忽慢 - 超出边界的粒子建议重置（如飞出右边界就回到左边界），避免无限累积计算
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const particles = Array.from({ length: 100 }, () => ({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 2,
vy: (Math.random() - 0.5) * 2,
radius: Math.random() * 2 + 1
}));
function update() {
particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
if (p.x > canvas.width) p.x = 0;
if (p.x < 0) p.x = canvas.width;
if (p.y > canvas.height) p.y = 0;
if (p.y < 0) p.y = canvas.height;
});
}
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = hsl(${p.x % 360}, 70%, 60%);
ctx.fill();
});
}
function loop(timestamp) {
update();
render();
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
加物理效果时最容易忽略的两个细节
想让粒子“像真实物体一样运动”，不是简单加个 vy += 0.1 就完事。重力、阻力、碰撞反馈这些看似简单的概念，在离散帧下极易失真。
- 加速度应乘以
deltaTime / 16（假设目标 60fps），否则在高刷屏或卡顿时会严重偏移 - 阻力（如空气摩擦）推荐用
vx *= 0.99这类指数衰减，而不是每次减固定值——后者在低帧率下会让粒子“突然停住” - 粒子间碰撞检测若用两两比较（O(n²)），200 个粒子就约 4 万次运算，CPU 瞬间吃满；实际项目中几乎都用空间分割（如四叉树）或直接放弃精确碰撞，改用场力（如鼠标吸引/排斥）
什么时候该换 WebGL 或用现成库？
当粒子数稳定超过 500，或需要逐像素光照、纹理、阴影时，Canvas 2D 会明显掉帧，且代码维护成本陡增。这时 WebGL（通过 THREE.Points 或自定义 shader）是更合理的选择。但注意：three.js 的 PointsMaterial 默认不支持单粒子独立旋转或复杂生命周期，得自己写 shader 才能突破限制。
立即学习“Java免费学习笔记（深入）”；
如果只是做营销页里的飘雪、光点、烟花，用 pixi.js 或轻量库 particles.js 更省心；但它们的配置项藏得深，比如 particles.js 的 move.enable 关闭后粒子仍可能因重力下落——因为默认启用了 gravity，得一并设为 { enable: false }。
