Javascript 画布在60秒后重新启动

我想用帆布画一个太阳系。除了我想让每个行星以不同的速度移动之外，一切都很好。然而，如果我在60秒后使用setInterval和ctx.rotate，整个画布将重新启动，每个行星都将再次从Begging开始

var sun = new Image();
var mercury = new Image();
var venus = new Image();

function init(){
    sun.src = 'sun.png';
    mercury.src = 'mercury.png';
    venus.src = 'venus.png';
    setInterval(draw,10);
}

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.globalCompositeOperation = 'destination-over';
    ctx.clearRect(0,0,2000,2000);
    ctx.save();  
    ctx.translate(1000,1000); 
    // MERCURY
    var time = new Date();
    ctx.rotate( ((2*Math.PI)/30)*time.getSeconds() + ((2*Math.PI)/30000)*time.getMilliseconds() );
    ctx.translate(105,0);
    ctx.save(); 
    ctx.rotate( -(((2*Math.PI)/3)*time.getSeconds() + ((2*Math.PI)/3000)*time.getMilliseconds() ) ); 
    ctx.drawImage(mercury,-15,-15,30,30);
    ctx.restore(); 
    ctx.restore();
    // VENUS
    ctx.save();
    ctx.translate(1000,1000);
    ctx.rotate( ((2*Math.PI)/120)*time.getSeconds() + ((2*Math.PI)/120000)*time.getMilliseconds() ); 
    ctx.translate(150,0); 
    ctx.save();
    ctx.rotate( -(((2*Math.PI)/3)*time.getSeconds() + ((2*Math.PI)/3000)*time.getMilliseconds() ));
    ctx.drawImage(venus,-35,-35,70,70);
    ctx.restore(); 
    ctx.restore();
    ctx.drawImage(sun,900,900,200,200);  
}

向下滚动一点。60秒后，金星将出现在另一边。 如何使此动画在一段时间后永不停止或重新启动？ 谢谢

---

顺便说一句。我想整个问题是因为Math.PI计算，但我不知道如何解决它。

问题是

time.getSeconds（）

，因为它总是给你一个介于0和59之间的值，所以每件事都会在一分钟后重复

解决方法是计算经过的时间，并由此计算角度

var startTime = Math.floor(Date.now())

# in draw:
var t = Math.floor(Date.now()) - startTime;

ctx.rotate( ((2*Math.PI)/30)*t/1000 + ((2*Math.PI)/30000)*t );

---

问题在于

time.getSeconds（）

，因为它总是给你一个介于0和59之间的值，所以一切都会在一分钟后重复

解决方法是计算经过的时间，并由此计算角度

var startTime = Math.floor(Date.now())

# in draw:
var t = Math.floor(Date.now()) - startTime;

ctx.rotate( ((2*Math.PI)/30)*t/1000 + ((2*Math.PI)/30000)*t );

---

问题在于，您正在使用实际时钟秒数和毫秒数来设置角度。当时钟秒数达到0时，金星的角度回到0:）。如果你根据绝对时间而不是每分钟时间来确定行星的位置，那么就不会重置。我更新了您的代码笔以说明：。我使用startTime的getSeconds（）来偏移金星的起始位置，这样两颗行星就不会以相同的角度位置（0）开始

var-sun=newimage（）；
var维纳斯=新图像（）；
var mercury=新图像（）；
var startTime=新日期（）// 问题是您正在使用实际时钟秒和毫秒来设置角度。当时钟秒数达到0时，金星的角度回到0:）。如果你根据绝对时间而不是每分钟时间来确定行星的位置，那么就不会重置。我更新了您的代码笔以说明：。我使用startTime的getSeconds（）来偏移金星的起始位置，这样两颗行星就不会以相同的角度位置（0）开始

var-sun=newimage（）；
var维纳斯=新图像（）；
var mercury=新图像（）；
var startTime=新日期（）//您可以提供代码片段、plunker或jsbin格式的代码吗？@PavanTeja这里您可以向下滚动一点。60秒后它将重新启动，维纳斯将立即移动到另一边我猜这与你的Pi数学有关。@JaredFarrish是的，你是对的，但是我不知道用什么代码来代替它，也不知道如何解决问题。使用
console.log（）
查看插入的值：这至少会告诉您发生了什么值。在本例中，它从
-125.65951735338693
变为
-0.014660765716752367
。您可以将代码作为代码段或在plunker或jsbin中提供吗？@PavanTeja在这里向下滚动一点。60秒后它将重新启动，维纳斯将立即移动到另一边我猜这与你的Pi数学有关。@JaredFarrish是的，你是对的，但是我不知道用什么代码来代替它，也不知道如何解决问题。使用
console.log（）
查看插入的值：这至少会告诉您发生了什么值。在这种情况下，它从
-125.65951735338693
变为
-0.014660765716752367
。