使用反向 Y 轴计算 2 点之间的度数
我正在使用 javascript/canvas 创建一个简单的 2D 游戏。 我需要计算出某个物体相对于我的位置的角度。
所以：假设我在 (10,10) 并且物体在 (10,5) - 这将导致 90 度（因为正 Y 向下，负 Y 向上） (10,10) 与 (10,15) 的夹角为 270 度。
我该怎么办呢？
I'm creating a simple 2D game in javascript/canvas.
I need to figure out the angle of a certain object relative to my position.
So: say I'm at (10,10) and the object is at (10,5) - that would result in 90 degrees (as positive Y is down, negative Y is up)
(10,10) vs (10,15) would be 270 degrees.
How would I go about this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
假设您位于 (a, b)，而对象位于 (c, d)。那么物体与你的相对位置就是(x, y) = (c - a, d - b)。
然后你可以使用
Math.atan2()函数 获取以弧度为单位的角度。请注意，结果在 [-π, π] 范围内。如果需要非负数，则必须将
弧度相加并转换为度数，然后乘以
180 / Math.PI。Suppose you're at (a, b) and the object is at (c, d). Then the relative position of the object to you is (x, y) = (c - a, d - b).
Then you could use the
Math.atan2()function to get the angle in radians.note that the result is in the range [-π, π]. If you need nonnegative numbers, you have to add
and convert radians to degrees, multiply by
180 / Math.PI.如果您的坐标是 (xMe, yMe) 并且它们的坐标是 (xThem, yThem)，那么您可以使用公式：
arctan((yMe-yThem)/(xThem-xMe))通常它' d 为 arctan((yThem-yMe)/(xThem-xMe))，但在这种情况下 y 轴的符号相反。
要将结果从弧度转换为度数，请乘以 180/pi。
所以在 JavaScript 中，这看起来像：
Math.atan((yThem-yMe)/(xThem-xMe))*180/Math.PIatan 给出 -pi/2 和 pi/ 之间的值2（即 -90 到 90 度之间）。但是您可以查看 (xThem - xMe, yMe - yThem) 向量位于哪个象限并进行相应调整。
If your coordinates are (xMe, yMe) and their coordinates are (xThem, yThem), then you can use the formula:
arctan((yMe-yThem)/(xThem-xMe))Normally it'd be
arctan((yThem-yMe)/(xThem-xMe)), but in this case the sign of the y-axis is reversed.To convert the result from radians to degrees multiply by 180/pi.
So in JavaScript, this would look like:
Math.atan((yThem-yMe)/(xThem-xMe))*180/Math.PIatan gives a value between -pi/2 and pi/2 (that is, between -90 and 90 degrees). But you can look at what quadrant your (xThem - xMe, yMe - yThem) vector is in and adjust accordingly.
通俗地说：
In layman's terms:
在 HTML5 画布中，原点是左上角，因此 y 轴从上到下增长。因此，无论您在单位圆上的任何位置计算点 A 与中心 (C) 的角度，您实际上都应该这样做
angle = Math.atan2(Cy-Ay,Ax-Cx)你会得到[-π, π]范围内的结果。
我不知道为什么他们没有将画布原点设置在左下角。
In HTML5 canvas the origin is the top left corner hence the y axis grows from top to bottom. So regardless of wherever you are on the unit circle to calculate the angle of point A to the center(C) you should in fact do like
angle = Math.atan2(Cy-Ay,Ax-Cx)and you will get your result in the range of [-π, π].
I have no idea why they haven't made the canvas origin the bottom left corner.