使用 ATAN 而不是 ATAN2 将图像旋转到面对鼠标点

Question

为了更好地理解三角函数在游戏开发中的工作原理，我一直在 CodePen 上创建一些 javascript 片段。

我设法创建了一个示例，该示例使用 Math.atan2() 将像素艺术霰弹枪指向鼠标光标。

现在，我正在尝试使用 Math.atan() 函数完成完全相同的事情，但它无法正常运行。

这是我使用的逻辑代码：

canvas.onmousemove = function(event) {
  Mouse = {
    x: event.pageX,
    y: event.pageY
  }

  // These length variables use the distance formula
  var opposite_length = Math.sqrt((Mouse.x - Mouse.x) * (Mouse.x - Mouse.x) + (Mouse.y - y) * (Mouse.y - y));

  var adj_length = Math.sqrt((Mouse.x - x) * (Mouse.x - x) + (y - y) * (y - y));


  var angle_in_radians = Math.atan(opposite_length / adj_length);

  //var angle_in_radians = Math.atan2(Mouse.y - y, Mouse.x - x);

  angle = angle_in_radians * (180 / Math.PI);
}

在我的 draw() 函数中，我使用以下方法将枪旋转到角度变量：

cxt.rotate(angle*(Math.PI/180));

如果您取消注释以 // var angle_in_radians 开头的行，一切都会突然生效。

所以，atan2 正在运行，但 atan 正在生成我想要的结果。

我知道 opposite_length 和 adj_length 是准确的，因为当我 console.log() 它们时，它们是正确的值。

您可以查看正在使用的代码 on CodePen 以获取实际示例。

有很多初始化的东西，但你真的只需要关注 canvas.onmousemove = function(event) 部分，从第 50 行开始。你也可以在第 68 行查看我的绘制函数。

Answer 1

请注意，您的 atan 计算等同于

atan2( abs(mouse.y-y), abs(mouse.x-x) )

屏幕坐标与笛卡尔坐标的方向相反。要从屏幕坐标获得笛卡尔角，请使用

atan2( y-mouse.y, mouse.x-x )

使用 ATAN 而不是 ATAN2 将图像旋转到面对鼠标点

Rotating an image to face mouse point using ATAN instead of ATAN2

javascript

math

trigonometry

atan2