Canvas 绘制动态粒子连线：欧几里得距离判定

粒子连线核心是用欧几里得距离判断邻近性，公式为√[(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 状态切换