In JS, how to have multiple drawings at different speeds?

问题

I’ve got drawings of planets that revolve around the sun. They rotate fine, but they need to be positioned accurately. They move at the same speed so it doesn’t look realistic.

I would like to know how to make some planets swing a lot faster than others but they’re all in the same animation function and trying to make several animation functions just causes errors.

Here's my relevant code:

function rotate_point(pointX, pointY, originX, originY, ang) {
    ang =  Math.PI / 180.0;
    return {
        x: Math.cos(ang) * (pointX-originX) - Math.sin(ang) * (pointY-originY) + originX ,
        y: Math.sin(ang) * (pointX-originX) + Math.cos(ang) * (pointY-originY) + originY 
    };
}



, Venus: {
            render: function(){
                ctx.beginPath();
                gravityVenus = rotate_point(gravityVenus.x, gravityVenus.y, dynamicSunX, dynamicSunY, angleOfSun); //the positions are dynamic based on what the canvas height and width are
                ctx.arc(gravityVenus.x,gravityVenus.y ,7, 0, 2*Math.PI);
                ctx.fillStyle = "rgba(255,165,0,1)"; 
                ctx.closePath();
                ctx.fill();
            }
        }
        , Mercury: {
            render: function(){
            ctx.beginPath();
            gravityMercury = rotate_point(gravityMercury.x, gravityMercury.y, dynamicSunX, dynamicSunY - 2, angleOfSun);
            ctx.arc(gravityMercury.x,gravityMercury.y ,5, 0, 2*Math.PI);
            ctx.fillStyle = "rgba(119,136,153,1)";  
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            }

    function animate(){
    background.render();
    Solarsystem.Neptune.render();       
    Solarsystem.Uranus.render();
    Solarsystem.Saturn.render();
    Solarsystem.Jupiter.render();   
    Solarsystem.Mars.render();
    Solarsystem.Earth.render();
    Solarsystem.Venus.render();
    Solarsystem.Mercury.render();       
    Solarsystem.Sun.render(); 
}

 var animateInterval = setInterval(animate, 1000/60); //this sets the speed for everything in the Solarsystem array.

I’ve found a snippet from somewhere that might help you but didn’t help me adjust , I tried to play with it but I couldn’t get it working. Here it is.

var time = new Date();
ctx.arc( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
enter code here

Could someone help me out? Thanks!

来源：https://stackoverflow.com/questions/36549466/in-js-how-to-have-multiple-drawings-at-different-speeds

标签

javascript

animation

drawing

intervals