In JS, how to have multiple drawings at different

问题:

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!