円周上の座標を求める方法
円周上の座標を求める公式を、JavaScriptで実装します。
サンプルコード
原点A(x1,y1)、半径r、角度θとする時、円周上の座標B(x2,y2)は次の公式で求められます。
(x2,y2) = (x1 + r * \cos\Theta, y1 + r * \sin\Theta)
公式をJavaScriptで表現すると、次の通りです。角度はラジアン単位で取り扱う点にご注意下さい。
var x2 = x1 + radius * Math.cos( angle * (Math.PI / 180) ) ;
var y2 = y1 + radius * Math.sin( angle * (Math.PI / 180) ) ;
デモ
コードを編集して、値にどのように反映されるのか確認してみて下さい。
var x1 = 0 ;
var y1 = 0 ;
var r = 100 ;
var a = 45 ;
var x2 = x1 + r * Math.cos( a * (Math.PI / 180) ) ;
var y2 = y1 + r * Math.sin( a * (Math.PI / 180) ) ;
x2 = 0
y2 = 0
1度ずつ角度を変更してアニメーションのようにすれば、円周上の座標を正常に取得できていることが確認できますね。
function setPosition ( angle ) {
var x1 = 120 ;
var y1 = 120 ;
var r = 120 ;
var a = angle ;
var x2 = x1 + r * Math.cos( a * (Math.PI / 180) ) ;
var y2 = y1 + r * Math.sin( a * (Math.PI / 180) ) ;
// <div id="target"></div>
var element = document.getElementById("target") ;
element.style.top = y2 + "px" ;
element.style.left = x2 + "px" ;
}
var degree = 0 ;
setInterval( function () {
setPosition( ++degree ) ;
}, 25 ) ;
関連記事
- 距離と角度から座標を求める方法
- 距離と角度から座標を求める公式を、JavaScriptで表現します。
- 2点の座標の角度を求める方法
- 2点の座標の角度を求める公式を、JavaScriptで表現します。
- 度をラジアンに変換する方法
- 単位を度からラジアンに変換するには、値にMath.PI / 180をかけましょう。
- 要素の位置座標を取得する方法
- 指定した要素の位置座標を取得します。
- 2点の座標の距離を求める方法
- 2点の座標の距離を求める公式を、JavaScriptで表現します。
- 2点の座標の中点を求める方法
- 2点の座標の中点を求める公式を、JavaScriptで表現します。