已知目标坐标，计算画布中箭头指向目标的旋转角度

核心逻辑 #

箭头初始朝向正上方（对应数学坐标系的正Y轴），固定在(0,0)点，要指向动态变化的目标点(targetX, targetY)，本质是计算目标点相对于箭头的向量与初始方向的夹角。

具体计算步骤 #

• 先算出目标点相对于箭头的向量：dx = targetX - 0，dy = targetY - 0，也就是直接用(targetX, targetY)。
• 注意画布坐标系差异：绝大多数画布系统（比如HTML5 Canvas）的Y轴是向下的，和数学坐标系Y轴向上相反，这种情况需要把dy取反，变成dy = -targetY。
• 如果你已经有该角度的正弦（sinθ）和余弦（cosθ）值，直接用atan2(sinθ, cosθ)就能得到弧度制的角度值；如果没有，直接用目标向量计算：θ = atan2(dy, dx)（这里的dy是处理后的值）。
• 调整初始方向的偏差：atan2默认返回的是从正X轴逆时针旋转的角度，而我们的箭头初始朝正Y轴，所以需要转换：
  • 数学坐标系下，最终旋转角度为π/2 - θ；
  • 画布Y轴向下的场景，直接用atan2(targetX, -targetY)一步就能算出正确的弧度角度。
• 如需角度制（而非弧度），用公式转换：角度值 = 弧度值 * 180 / π。

示例代码（以JavaScript为例） #

// 目标点坐标
const targetX = 150;
const targetY = 80;

// 画布Y轴向下的场景，计算旋转弧度
const rotateRadian = Math.atan2(targetX, -targetY);
// 转换为角度制（可选）
const rotateDegree = rotateRadian * 180 / Math.PI;

// 应用到Canvas箭头旋转
ctx.save();
ctx.translate(0, 0); // 箭头固定点
ctx.rotate(rotateRadian);
// 绘制箭头的代码
ctx.restore();

注意事项 #

• 不同编程语言的atan2参数顺序可能有区别，比如部分语言是atan2(x, y)，要对照官方文档确认；
• 多数画布API默认逆时针为正旋转方向，如果需要顺时针旋转，直接取角度的负值即可。

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