SYNCERのロゴ
アイキャッチ画像

円周上の座標を求める方法

円周上の座標を求める公式を、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 ) ;
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月6日 (日)
コンテンツを公開しました。