Canvas更适合实现粒子效果，因其通过requestAnimationFrame+clearRect+fillCircle可稳定60fps；CSS依赖DOM节点，超200粒子即引发重排卡顿，且无法触达渲染中间态或实现复杂物理逻辑。
Canvas 更适合实现粒子效果，CSS 仅适用于极简、静态或低交互场景。
为什么 Canvas 是主流选择
粒子系统本质是高频更新大量独立对象的位置、颜色、透明度等属性，Canvas 的 requestAnimationFrame + clearRect + fillCircle（或 drawImage）组合能稳定维持 60fps；而 CSS 动画依赖 DOM 节点，每颗粒子一个 <div> 在超过 200 粒子时就会触发强制重排，CPU 占用飙升，iOS 上尤其卡顿。
- Canvas 可直接操作像素（如用
getImageData做碰撞/力场计算），CSS 完全无法触达渲染中间态 - Canvas 粒子可轻松支持物理模拟（速度/加速度/引力）、鼠标扰动、图像采样映射等复杂逻辑
- 打包后体积可控：纯 Canvas 实现通常 transform 和
opacity，性能损耗隐性且难调试
CSS 粒子的适用边界在哪
只在满足全部以下条件时才考虑 CSS：粒子数 ≤ 50、无实时交互（如鼠标跟随）、动画路径固定（如预设贝塞尔曲线）、不需要 Alpha 渐变或混合模式。
- 可用
@keyframes配合animation-delay错峰启动，避免同时重绘 - 必须用
will-change: transform或transform: translateZ(0)强制 GPU 加速，否则默认走 CPU 合成 - 切忌用
top/left驱动位移——会触发 layout，改用transform: translate()
一个 Canvas 粒子核心循环长什么样
关键不是“画出来”，而是“怎么高效更新”。下面是最小可行骨架：
立即学习“Java免费学习笔记（深入）”；
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const particles = Array.from({ length: 300 }, () => ({
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() * 1.5
}));
<p>function update() {
particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
p.vx <em>= 0.99; // 阻尼
p.vy </em>= 0.99;
if (p.x < 0 || p.x > canvas.width) p.vx <em>= -0.8;
if (p.y < 0 || p.y > canvas.height) p.vy </em>= -0.8;
});
}</p><p>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 <em> 2);
ctx.fillStyle = `hsla(${p.x / canvas.width </em> 360}, 70%, 60%, 0.8)`;
ctx.fill();
});
}</p><p>function loop() {
update();
render();
requestAnimationFrame(loop);
}
loop();注意：clearRect 比 ctx.globalCompositeOperation = 'destination-out' 更快；颜色用 hsla 动态生成比预存数组省内存；半径控制在 0.5–2 之间能避免抗锯齿开销过大。
容易被忽略的兼容与性能细节
移动端 Canvas 粒子常崩在 DPI 缩放和内存回收上：
- 必须监听
window.devicePixelRatio并重设canvas.width/height，否则高分屏下模糊或缩放失真 - 粒子数量动态调整：用
window.matchMedia('(prefers-reduced-motion)')降级到 50 粒子 - 避免在
render中反复创建Path2D或调用createLinearGradient——提前实例化复用 - Chrome 115+ 对
OffscreenCanvas支持已稳定，复杂力场计算可移入 Web Worker，但需自行序列化粒子状态
真正卡住项目的往往不是“怎么画粒子”，而是 resize 时未重置 canvas 尺寸、未节流鼠标事件导致 update 频率失控、或在每个粒子里 new Date() 这类隐蔽开销。
