使用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()函数中，我使用以下方法将枪旋转到角var：

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

如果取消对以// var angle_in_radians开头的行的注释，那么一切都会突然正常运行。

所以，atan2正在工作，但是atan正在产生我想要的结果。

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

您可以查看用于活生生的示例的论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 )