フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasで直線の角度を取得する

Canvas上に、2点をつなげた直線を描画する際、その角度を取得するためのTipsです。
x座標はMath.cos(ラジアン)×距離
y座標はMath.sin(ラジアン)×距離
で取得できます。

以下のサンプルは角度(n/360度)と距離(ピクセル)くを渡すと、その位置の座標(x,y)を保持するオブジェクトを返す関数です。

// 距離と角度から座標を求める
function getPointByDistanceAndDegree(distance, degree){
	// 角度をラジアンに変換
	var _radian = Math.PI / 180 * degree;
	// 座標を取得
	var _x = Math.cos(_radian) * distance;
	var _y = Math.sin(_radian) * distance;
	
	return{
		x:_x,
		y:_y
	}
}

// 上記関数を使って、x座標とy座標を取得します
var point = getPointByDistanceAndDegree(100, 45);
var x = point.x;
var y = point.y;

ちなみに0度は起点から見て右真横、時計の3時の方向になり、時計回りに増えていきます。