三角関数（2）

_wonder

2010-09-01 12:37:26

License: MIT License

Fork: 1

Fav: 1

View: 28669

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 50 lines
HTML 1 lines
CSS 1 lines

三角関数（2）

window.onload = function(){

//Canvasのセット
    var canvas = document.getElementById("canvas");
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

//設定
    var stageWidth = 445;
    var stageHeight = 445;
    var centerX = 200;
    var centerY = 200;
    var angle = 0;
    var per = Math.PI / 36;
    var delay = 33;

//とりあえず( 100, 100 )にしてみる
    var posX = 100;
    var posY = 100;

//角度を求める
    var dx = posX - centerX;
    var dy = posY - centerY;
    var angle = Math.atan2( dy, dx );

//半径を求める
    var radius = Math.sqrt( dx*dx + dy*dy );

//繰り返し処理
    var loop = function(){
        ctx.clearRect( 0, 0, stageWidth, stageHeight );

//座標を取得
        var posX = Math.cos( angle ) * radius + centerX;
        var posY = Math.sin( angle ) * radius + centerY;

//Canvasに描画
        ctx.beginPath();
        ctx.fillStyle = "#cc0000";
        ctx.arc( centerX, centerY, 5, 0, Math.PI * 2, true ); //中心点を書いておく
        ctx.arc( posX, posY, 20, 0, Math.PI * 2, true ); //移動する点
        ctx.fill();
        ctx.closePath();

angle += per;
    };

loop();
    var int = setInterval(loop, delay);
};

三角関数（2）

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/9C6Z/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/_wonder/9C6Z" title="三角関数（2）">三角関数（2） - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip