読者です 読者をやめる 読者になる 読者になる

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

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

(Javascript)Canvasで角度と距離から座標を出す。

座標0,0(左上)を基準にして、特定の角度に向かって、特定の距離を進んだ際の座標を求める方法です。

x座標はMath.cos関数、y座標はMath.sin関数で取得することができます。

角度をラジアンに変換する

Math.cos関数とMath.sin関数の、どちらも引数に角度を渡しますが、角度はn/360ではなく、ラジアンという単位で指定します。360°=2Πラジアンなので、1°=Π/180 となります。なので、n/360をラジアンに変換する場合は、以下のようなメソッドが役に立ちます。

function getRadian(degree){
    return degree * Math.PI / 180;
}
座標を取得する

Math.cos関数とMath.sin関数からの戻り値は、距離1に対する比率なので、距離が100の場合は、各戻り値に100をかけてやれば実際の座標を取得することができます。

var distance = 100; //距離
var x = Math.cos(getRadian(50)) * distance;
サンプル

以下のサンプルは、引数に距離(ピクセル)と角度(度)を渡すと、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
	}
}

注意
この方法で行う場合は、0°が時計の3時の方向になるので、0,0を基準にした場合は、0°~90°の間だけがcanvas内に表示されることになり、それ以外は画面外なので描画されません。