粒子连线核心是用欧几里得距离判断邻近性，公式为√[(x₂−x₁)²+(y₂−y₁)²]，实际常比较平方距离dx²+dy²与maxdistance²以提升性能。
Canvas 实现粒子连线，核心就是用欧几里得距离判断两个粒子是否“够近”，从而决定要不要画一条线。这个距离不是凭感觉设的，它直接决定性能和视觉效果——太远，满屏乱连；太近，画面空荡无神。
欧几里得距离怎么算？
两个粒子坐标分别是 (x₁, y₁) 和 (x₂, y₂)，它们之间的直线距离就是：
distance = Math.sqrt((x₂ − x₁)² + (y₂ − y₁)²)
实际代码中，为节省开销，通常先比较平方距离（避免反复开方）：
- 计算 dx = x₂ − x₁，dy = y₂ − y₁
- 算 squaredDistance = dx * dx + dy * dy
- 再和 maxDistance² 比较：if (squaredDistance
maxDistance 设多少合适？
这不是一个固定值，得看粒子数量和交互需求：
- 纯背景、300 粒子以内：80 ~ 120 是安全区间，帧率稳定不掉帧
- 开启鼠标跟随时：建议把鼠标影响半径单独设为 150，但只对附近约 20 个粒子做距离判断（避免遍历全部）
- 超过 200 就容易卡：两两比对是 O(n²) 运算，400 粒子下每帧要算近 16 万次距离
连线怎么画才自然？
光判断“连不连”不够，视觉上要体现远近关系：
- 线宽随距离减小：比如从 0.8 降到 0.1
- 透明度也随距离衰减：distance 越小，alpha 越高（如用 0.8 − distance / maxDistance）
- 颜色可微调：近处偏亮、远处偏灰，增强层次感
- 避免重叠描边：每次绘制前 clearRect 或叠加半透明底色（如 'rgba(0,0,0,0.05)'），制造拖尾余韵
怎么避免性能崩掉？
距离判定是性能热点，不能硬刚：
- 粒子数控制在 100–300 之间，视觉饱满又不吃 CPU
- 鼠标交互时，先用简单遍历 + 提前 break，只处理距离最近的 20 个粒子
- 不用四叉树等复杂结构时，至少按网格分区预筛：把画布分成若干格，只比对同格或邻格粒子
- 动画循环中，把距离计算和连线绘制拆成两步：先批量算距离标记可连线对，再统一绘制，减少 ctx 状态切换
