Ротация Javascript HTML5

Я новичок в JavaScript (и программировании) и не могу понять, как добавить вращение в HTML5 Canvas. По сути, я пытаюсь заставить объект JavaScript вращаться вокруг другого объекта. В моем случае мне нужно заставить планету вращаться вокруг Солнца.

В настоящее время у меня есть планеты, объявленные в функции рисования, и они отображаются нормально. Мне просто нужна помощь в том, как добавить вращение.

Спасибо за ваше время.


person Community    schedule 27.11.2012    source источник
comment
Вам нужно изменить положение объектов и перерисовать холст.   -  person Diodeus - James MacFarlane    schedule 27.11.2012


Ответы (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);
    })();

})();​
person Shmiddty    schedule 27.11.2012
comment
Если бы я расширил это, чтобы включить спутники, я бы сделал их свойством класса CelestialBody и использовал текущую позицию родителя в качестве их orbitalCenter. - person Shmiddty; 27.11.2012
comment
Спасибо за ваш ответ, но когда я нажимаю на ссылку JSFiddle, планеты не вращаются? - person ; 27.11.2012
comment
Сейчас он будет работать только в браузерах webkit (например, Chrome). Если вы измените webkitRequestAnimationFrame на mozRequestAnimationFrame, он будет работать в FireFox. - person Shmiddty; 27.11.2012
comment
В идеале вы должны включить полифилл для requestAnimationFrame и использовать его. - person Shmiddty; 27.11.2012
comment
Спасибо, именно то, что я искал :) - person ; 27.11.2012
comment
Извините, что продолжаю задавать вопросы, но есть ли способ раскрасить каждую из планет по отдельности? - person ; 30.11.2012
comment
Да, вы бы просто добавили это к параметрам и передали при построении CelestialBody - person Shmiddty; 30.11.2012