DIR : /home/kozerus/public_html/jkwii/js/jsdoit/orbit2/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/orbit2

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);
};
//


koh5_pano



Your browser does not support the HTML5 canvas element.


Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer