maxDistance需权衡性能与视觉：过大（如200+）致O(n²)计算拖垮帧率，过小（如1）则连线异常；更新与绘制须分两遍循环避免残影；鼠标交互应采用加速度积分渐进调整速度防抖动飞出。
粒子连线距离阈值怎么设才不卡也不空
连线是否自然，关键在 maxDistance 这个值——它不是越大越好，也不是越小越密。设太大（比如 200+），每帧都要对所有粒子两两计算距离，O(n²) 开销直接拖垮 60fps；设太小（比如
实操建议：
- 常规背景用
80 ~ 120是安全区间，300 粒子下帧率稳定 - 若开启鼠标交互，建议把鼠标影响半径单独设为
150，但只对附近 20 个粒子做距离判断（用空间划分或简单遍历+提前 break） - 连线透明度别写死，推荐用
Math.max(0.05, 1 - distance / maxDistance)，避免远距离出现“毛刺线”
canvas 粒子连线时为什么线条发虚、断续、边缘锯齿
这不是代码逻辑问题，是 Canvas 像素对齐和 DPR（设备像素比）没处理。高分屏上 canvas.width 和 CSS width 不一致，绘图坐标被缩放后抗锯齿失效，线条就糊了。
必须做 DPR 适配：
- 读取
window.devicePixelRatio，设 canvas 实际宽高为window.innerWidth * dpr - 用
ctx.scale(dpr, dpr)或ctx.setTransform(dpr, 0, 0, dpr, 0, 0)把绘图坐标系拉回逻辑像素 - 连线用
ctx.lineWidth = 1 / dpr，否则线条在 Retina 屏上会粗得离谱 - 别用
ctx.lineCap = 'round'加粗端点——它在 DPR > 1 时渲染异常，改用'butt'更可控
requestAnimationFrame 中粒子更新顺序影响连线效果吗
影响，而且很隐蔽。如果你先更新所有粒子位置，再统一画线，会出现“上一帧的位置连这一帧的点”的错位感，尤其在高速运动或鼠标快速移动时，连线像拖着残影。
正确做法是把“更新 + 绘制”拆开两层：
- 第一遍循环：只调用每个粒子的
update()，完成全部位置迁移 - 第二遍循环：先画粒子（
draw()），再对每个粒子遍历其他粒子，满足距离条件就ctx.beginPath() → moveTo → lineTo → stroke() - 避免在单次循环里边 update 边 draw 边连线——状态不同步，视觉延迟明显
鼠标交互导致粒子抖动或飞出画布怎么办
抖动主因是力模型没衰减，飞出则常因速度叠加失控。粒子受鼠标吸引/排斥时，不能直接赋值新速度，得用加速度积分方式渐进调整。
推荐简化版物理模型：
- 计算鼠标到粒子的向量
dx = mouseX - particle.x，dy = mouseY - particle.y - 距离
dist = Math.sqrt(dx*dx + dy*dy)，若dist 才生效 - 加速度按
force = Math.min(0.05, 5 / (dist + 1))控制强度，避免零距离爆炸 - 再用
particle.vx += dx / dist * force、particle.vy += dy / dist * force - 最后加一句
particle.vx *= 0.98; particle.vy *= 0.98模拟阻尼，不然粒子越跑越快
边界穿越比反弹更稳：超出右边界就 x = 0，超出下边界就 y = 0，配合 ctx.globalCompositeOperation = 'lighter' 可掩盖瞬时空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
