在Javascript中定位旋转对象

我正在用Javascript创建一个交互式太阳系画布

行星以三角函数围绕太阳旋转。这个特殊的代码是为我写的，所以我不知道它到底是如何工作的

为了使行星定位正确，使它们绕太阳旋转一圈，我只能在不接触y轴的情况下定位它们的x轴。但每当我刷新页面时，它们都会从非常不现实的位置开始。这可以通过知道如何正确定位或改变行星的速度来解决

以下是大部分相关代码：

    function initCanvas(){

    var ctx = document.getElementById('my_canvas').getContext('2d');
    var dynamicSunW = 25;
    var dynamicSunH = 0;
    var dynamicSunX = (ctx.canvas.width * .5) - (Math.PI* 1 * .5);  
    //dynamicSun is always at dead center of canvas
    var dynamicSunY = (ctx.canvas.height * .5) - (dynamicSunH * .5);
    var angleOfSun = 0;

    var posMercuryX = (ctx.canvas.width * .5) - (Math.PI* 1 * .5) - 50;  
    var posMercuryY = (ctx.canvas.height * .5) - (dynamicSunH * .5) + 20;
    var gravityMercury = {x: posMercuryX, y: posMercuryY };

    var posVenusX = (ctx.canvas.width * .5) - (Math.PI* 1 * .5) - 50;
    var posVenusY = (ctx.canvas.height * .5) - (dynamicSunH * .5) + 46;
    var gravityVenus = {x: posVenusX, y: posVenusY };
    /*these variables with lots of calculations behind them simply represent
    dynamic positions based on canvas width and height so that whenever i change
    the canvas size, the positions will still be the same in relation to the size
     */     

    //this code was not written by, the trigonometric function
        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 
                };
            }


            //an array of each planet with their own position, size and style
        var Solarsystem = {     
        Venus: {
                render: function(){
                    ctx.beginPath();
                    gravityVenus = rotate_point(gravityVenus.x, gravityVenus.y, 
dynamicSunX, dynamicSunY, angleOfSun);
                    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();
            }
        }
        , Sun: {
        render: function(){
        ctx.fillStyle = "rgba(255,255,51,1)";  
        ctx.save(); //store ctx so it can  be later reused 
        ctx.shadowColor = 'yellow';
        ctx.shadowBlur = 70;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;  
        ctx.beginPath();
        ctx.arc(dynamicSunX, dynamicSunY, dynamicSunW, 

dynamicSunH, Math.PI*2, true);


    ctx.closePath();
        ctx.fill();
        ctx.restore(); //ctx at time of save

下面是我如何设置动画间隔的

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

PS：我问了一个不同的问题，关于如何加速每个星球。我还在等答案。如果你知道怎么做，也请给我一个答案！

---

您应该从理解您正在使用的代码开始。问作者，问一些具体的问题，但在你知道它的作用之前，你不会成功地扩展它。我确实理解我的代码，这是我不理解的一个方面，这并不是因为我没有尝试过。我不知道该怎么做，这主要是因为数学