javascript - HTML5 Javascript の回転

Question

私は JavaScript (およびプログラミング) が初めてで、HTML5 キャンバスに回転を追加する方法に苦労しています。私は基本的に、JavaScript オブジェクトを別のオブジェクトの周りを回転させようとしています。私の場合、惑星を太陽の周りを周回させる必要があります。

現在、描画関数内で宣言されている惑星があり、正常に表示されます。回転を追加する方法について助けが必要です。

御時間ありがとうございます。

Answer 1

簡単な例を次に示します: http://jsfiddle.net/FTMCv/1/

私が作成したCelestialBodyクラスは円軌道のみを考慮しているため、完全なシミュレーションではありませんが、ほとんどの場合はこれで十分です。

(function(){

    var can = document.getElementById('planetarium'),
        ctx = can.getContext('2d'),
        bodies = [];


    (function init(){
        var orbCenter = {x:can.width/2, y:can.height/2};

        bodies.push(new CelestialBody(
            50, orbCenter , 0, 0));

        bodies.push(new CelestialBody(
            15, orbCenter , 250, -.2));
        bodies.push(new CelestialBody(
            6, orbCenter , 200, .3));
        bodies.push(new CelestialBody(
            7, orbCenter , 150, .5));
        bodies.push(new CelestialBody(
            5, orbCenter , 100, 1));
        bodies.push(new CelestialBody(
            4, orbCenter , 75, 3));
    })();

    function CelestialBody(radius, orbitalCenter, orbitalDistance, orbitalVelocity){
        var pos = {x:0, y:0},
            rad = radius,
            orb = {x: orbitalCenter.x, y:orbitalCenter.y},
            ove = orbitalVelocity,
            odi = orbitalDistance;

        var update = function(){
            var cAng = Math.atan2(pos.y - orb.y, pos.x - orb.x);
            var rAng = cAng + ove * Math.PI/180;

            pos.x = orb.x + Math.cos(rAng) * odi;
            pos.y = orb.y + Math.sin(rAng) * odi;
        };

        this.draw = function(ctx){
            update();

            ctx.beginPath();
            ctx.fillStyle = "#fff";
            ctx.arc(pos.x,pos.y, rad, 0, 2*Math.PI);
            ctx.fill();
        };

        (function init(){
            pos.y = orb.y;
            pos.x = orb.x + odi;
        })();
    }

    (function draw(){
        ctx.clearRect(0,0,can.width,can.height);

        for(var i = 0; i < bodies.length; i++)
            bodies[i].draw(ctx);

        webkitRequestAnimationFrame(draw);
    })();

})();​