Javascript/canvasで簡単な2Dゲームを作成しています。自分の位置に対する特定のオブジェクトの角度を把握する必要があります。
つまり、私が(10,10)にいて、オブジェクトが(10,5)にあるとすると、90度になります(正のYが下がると、負のYが上になるため)(10,10)vs(10、 15)270度になります。
どうすればいいですか?
(a、b)にいて、オブジェクトが(c、d)にあるとします。その場合、オブジェクトの相対位置は(x、y)=(c-a、d-b)です。
次に、 Math.atan2()
function を使用して、角度をラジアンで取得できます。
var theta = Math.atan2(-y, x);
結果は[-π、π]の範囲にあることに注意してください。非負の数が必要な場合は、追加する必要があります
if (theta < 0)
theta += 2 * Math.PI;
ラジアンを度に変換し、180 / Math.PI
を掛けます。
座標が(xMe、yMe)で、座標が(xThem、yThem)の場合、次の式を使用できます。
arctan((yMe-yThem)/(xThem-xMe))
通常はarctan((yThem-yMe)/(xThem-xMe))
ですが、この場合、y軸の符号が逆になります。
結果をラジアンから度に変換するには、180/piを掛けます。
したがって、JavaScriptでは、これは次のようになります。Math.atan((yThem-yMe)/(xThem-xMe))*180/Math.PI
atanは、-pi/2からpi/2の間(つまり、-90から90度の間)の値を与えます。ただし、(xThem-xMe、yMe-yThem)ベクトルがどの象限にあるかを確認し、それに応じて調整することができます。
素人の言葉で:
function pointDirection(x1, y1, x2, y2) {
return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
}
HTML5キャンバスでは、原点は左上隅であるため、y軸は上から下に向かって大きくなります。したがって、中心(C)に対する点Aの角度を計算するために単位円上のどこにいても、実際には次のようにする必要があります。
angle = Math.atan2(Cy-Ay,Ax-Cx)
[-π、π]の範囲で結果が得られます。
なぜ彼らがキャンバスの原点を左下隅にしないのか私にはわかりません。