JavaScript | 2点の座標から角度を計算・取得する方法

2021-11-202022-10-29JavaScript 数値・計算,JavaScript

JavaScriptを使って2点の座標の角度を計算して取得する方法を紹介しています。

2点の座標から角度を計算する方法

2点の座標から角度を計算する方法の簡単なサンプルコードです。

A点を原点としたB点への角度をラジアン単位（radian）で取得します。

let A = { x: 10, y: 10 };
let B = { x: 20, y: 20 };
let radian = Math.atan2( B.y - A.y, B.x - A.y );

console.log(radian);
// 14.142135623730951

以下のサンプルコードは取得したラジアン単位の値を角度（degree）に変換します。

let A = { x: 10, y: 10 };
let B = { x: 20, y: 20 };
let radian = Math.atan2( B.y - A.y, B.x - A.x );
let degree = radian * (180 / Math.PI);

console.log(degree);
// 45

関連：JavaScript | ラジアンを角度、角度をラジアンに変換する方法 | ONE NOTES

利用しているJavaScript関数の処理内容は以下の通りです。

要素の座標を取得する場合は以下のようにして取得する事が可能です。
HTML要素の位置はデフォルトの場合、左上の角となっています。

let rect = querySelector('#A').getBoundingClientRect();
let x = rect.top;
let y = rect.left;