Canvas动画Bug：绘制连线时Javascript篡改数组元素属性

1. 排查引用类型的意外修改 #

数组中的圆点是引用类型对象，console.log 打印的是对象引用，可能存在代码修改了原对象但log显示旧值的情况（比如log在修改前执行，或浏览器控制台展开时才读取最新值）。

• 调试时改用 console.log(JSON.stringify(dots)) 打印序列化后的值，确认实际数据状态
• 检查连线逻辑中是否存在直接修改圆点属性的代码，比如误写了 dot.radius = 0 或所有圆点共享同一个 speed 对象引用（如 const speed = {x: 1, y:1}; dots.forEach(d => d.speed = speed)）

2. 检查绘制逻辑的条件分支 #

• 确认绘制圆点的代码是否被连线逻辑的条件跳过，比如只有当无连线时才绘制半径，或循环中错误地给除第一个外的圆点设置了 radius=0
• 检查连线判断的条件是否写反，例如本应是「间距小于150时连线」，却写成了「间距大于150时修改圆点属性」

3. 排查动画循环的作用域问题 #

• 若使用 var 遍历圆点数组，会导致所有迭代共享同一个变量引用，最终只有最后一个圆点的状态生效。改用 let/const 遍历：

  // 错误示例
  for (var i = 0; i < dots.length; i++) {
    const dot = dots[i];
    // ... 逻辑
  }
  // 正确示例
  for (const dot of dots) {
    // ... 逻辑
  }
  

• 检查 requestAnimationFrame 回调中是否存在变量提升导致的状态覆盖

4. 验证绘制顺序与状态污染 #

• 确认连线绘制是否修改了Canvas上下文状态（如 fillStyle、lineWidth），导致后续圆点绘制样式异常，看起来像半径为0
• 检查连线逻辑中是否临时修改了圆点属性但未恢复，比如为计算临时调整 radius 后未重置

5. 断点调试实时状态 #

不要仅依赖 console.log，在浏览器DevTools中给绘制圆点和连线逻辑的关键代码打断点，查看每个圆点的 radius、speed 实际值，确认是否在执行连线代码后属性被修改

6. 最小化复现定位问题 #

逐步注释连线逻辑的代码块，每次只保留一部分逻辑运行：

1. 先保留距离计算逻辑，验证圆点状态是否正常
2. 再添加连线绘制代码，看是否影响圆点显示
3. 最后加入间距判断条件，定位触发异常的具体代码段

内容的提问来源于stack exchange，提问作者Kleokamoto