必须用 Math.atan2() 而不是 Math.atan(),因为 atan(y/x) 会丢失符号信息导致象限误判(如 (1,1) 和 (-1,-1) 均得 45°),而 atan2(dy, dx) 通过独立接收 y、x 差值准确判断象限,返回 -π 到 π 弧度,再转角度并校正为 0–360°。

用 Math.atan() 直接算朝向会有问题,因为它只接受一个参数、无法区分象限。正确做法是用 Math.atan2(dy, dx) —— 它自动处理四个象限,返回 -π 到 π 范围的弧度值,再转角度即可。
为什么必须用 Math.atan2() 而不是 Math.atan()
Math.atan(y/x) 会丢失符号信息:比如 (1,1) 和 (-1,-1) 的 y/x 都是 1,结果都是 45°,但实际方向相反。Math.atan2(dy, dx) 接收「y 差值」和「x 差值」两个独立参数,能准确判断目标在当前物体的哪个象限。
- dy = targetY - currentY(纵向偏移)
- dx = targetX - currentX(横向偏移)
- 调用
Math.atan2(dy, dx)得到的是从正 x 轴逆时针旋转的弧度
从弧度转角度并归一化到 0–360°
JavaScript 中 Math.atan2() 返回值范围是 [-π, π],对应角度 [-180°, 180°]。若需 0–360° 表示(例如 Unity 或 Canvas 旋转习惯),需做偏移校正:
- 先乘
180 / Math.PI转为角度 - 若结果为负,加 360° 即可
代码示例:
const dx = targetX - currentX; const dy = targetY - currentY; const radian = Math.atan2(dy, dx); // 弧度,-π 到 π const angle = radian * 180 / Math.PI; // 角度,-180 到 180 const angle360 = angle < 0 ? angle + 360 : angle; // 归一化到 0–360
注意坐标系方向对“朝向”的影响
大多数前端 canvas 或 DOM 坐标系:y 向下为正。这意味着 Math.atan2(dy, dx) 算出的角度,0° 是向右(正 x),90° 是向下(正 y),这与数学标准坐标系(y 向上)一致,但和某些游戏引擎(如 Unity 默认 y 向上)可能不同。
- 如果目标系统 y 向上(如 SVG、部分 WebGL 场景),而你的坐标 y 向下,需先翻转 dy:
dy = currentY - targetY - 若要让物体“朝向目标”,通常直接用该角度设置 rotation(CSS transform、canvas rotate、或 Three.js 的 rotation.y)

















