Canvas粒子动画需先用document.getElementById获取canvas元素并调用getContext('2d')，宽高须显式设置width/height属性；粒子对象应含x、y、vx、vy、size、alpha字段，数量控制在100–300；连线逻辑需限制检测半径或采用空间划分避免O(n²)性能问题。
Canvas 粒子动画怎么初始化画布和上下文
必须用 document.getElementById 拿到 元素，再调用 getContext('2d') ——漏掉这步或写成 'webgl' 会导致后续所有粒子绘制失效。注意 canvas 的宽高不能只靠 CSS 设置，必须显式设置 width 和 height 属性，否则粒子会拉伸、坐标错乱。
- 用
canvas.width = window.innerWidth动态适配视口，但记得在resize事件里重设并清空画布 - 避免在
draw循环里反复调用getContext，它开销不小 - 如果页面有滚动条，
window.innerWidth不含滚动条宽度，用document.documentElement.clientWidth更稳
粒子对象怎么定义才支持流畅运动
每个粒子至少得有 x、y、vx、vy、size、alpha 字段；用构造函数或对象字面量都行，但别用 class 套一层再实例化几百个——V8 对密集小对象的 GC 压力明显。粒子数量建议控制在 100–300 之间，超过 500 就容易在低端设备掉帧。
-
vx/vy初始值推荐用(Math.random() - 0.5) * 2范围，避免集体朝一个方向漂移 - 不要每帧都
Math.random()生成新速度，加个阻尼系数（如*= 0.98）让运动更自然 - 粒子透明度
alpha别直接设 0，保留 0.05–0.2 的最小值，否则消失时会有闪烁感
连线逻辑怎么避免 O(n²) 性能爆炸
粒子两两判断距离是典型 O(n²) 操作，300 个粒子就要比对近 9 万次。实际只需检查「距离鼠标位置」或「邻近区域」的粒子，用空间划分（如网格桶）或限制最大检测半径（maxDistance = 120）能立刻压到 O(n×k)，k 是平均邻近粒子数。
- 用
if (dist 包住连线代码，别先算 sqrt 再比——改用distSq - 鼠标交互时，只对距鼠标
150px内的粒子做连线，其他跳过 - 完全静止的粒子（如背景装饰）可打上
static: true标志，跳过速度更新和连线检测
怎么让动画不卡顿又兼容老浏览器
核心是用 requestAnimationFrame 替代 setTimeout，但必须配合「时间戳节流」：记录上一帧时间，若间隔小于 16ms（60fps）就跳过本次绘制。IE11 不支持 requestAnimationFrame，需 fallback 到 setTimeout(..., 16)，但要手动处理帧率补偿。
立即学习“前端免费学习笔记（深入）”；
- 每次
clearRect前先用ctx.save()，绘制完ctx.restore()，防止全局 alpha 或 transform 残留影响下帧 - 禁用抗锯齿：
ctx.imageSmoothingEnabled = false，对圆形粒子无感但提升 10%+ 渲染速度 - 移动端务必监听
touchmove并阻止默认行为，否则滑动时动画会暂停
粒子动画真正难的不是画点连线，而是当用户缩放页面、切到后台标签页、或打开开发者工具时，如何不让 requestAnimationFrame 累积大量未执行帧导致恢复瞬间卡死——这点几乎没人提，但上线后第一波投诉往往来自这里。
