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

2021-11-202023-02-18JavaScript 数値・計算,JavaScript

JavaScriptを使って2点の座標から距離を計算して取得する方法とサンプルコードを紹介しています。

2点の座標から距離を計算する方法

2点の座標から距離を計算する方法になります。
Math.sqrt()関数は指定した値の平方根を計算し、Math.pow()は第一引数の値を第二引数の値で累乗します。

これらの関数を使って2点の座標から距離を計算するには以下のように記述することが可能です。

let a = { x: 10, y: 10 };
let b = { x: 20, y: 20 };
let dist = Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));

console.log(dist);
// 14.142135623730951

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

2点間の距離の公式は以下のようになっています。

(x2​−x1​)2+(y2​−y1​)2

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

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