Question

我得到了围绕太阳旋转的行星图。它们旋转精细，但需要准确定位。它们以相同的速度移动，因此看起来不太真实。

我想知道如何使一些行星比其他行星更快地摆动但是它们都处于相同的动画功能中并试图制作几个动画函数只会导致错误。

这是我的相关代码：

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.

我从某个地方发现了一个可能对你有所帮助，但没有帮助我调整的片段，我试着玩它，但我无法让它发挥作用。在这里。

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

有人可以帮帮我吗？谢谢！

在JS中，如何以不同的速度获得多个图纸？

0 个答案: