Question

我试图用帆布做太阳系。一切都很好，除了我想让每个星球以不同的速度移动。但是，如果我在60秒后使用setInterval和ctx.rotate，整个画布将重新开始，并且每个星球都会从再次开始。

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

DEMO

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

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

Answer 1

问题是sqlalchemy，因为它总会给你一个0到59之间的值，所以一切都会在一分钟后重复。

解决方案是计算经过的时间并从中计算出角度。

time.getSeconds()

Demo

Answer 2

问题是您使用实际时钟秒和毫秒来设置角度。当时钟秒数达到0时，金星的角度会回到0 :)。如果你将行星的位置建立在绝对时间而不是每分钟时间上，那么就没有重置。我更新了您的codepen以说明：http://codepen.io/anon/pen/pyowbw?editors=0010。我使用startTime的getSeconds（）来偏移金星的起始位置，这样两个行星都不会从相同的角度位置（0）开始。

var sun = new Image();
var venus = new Image();
var mercury = new Image();
var startTime = new Date();  //<-- Capture a reference time
function init(){
  sun.src = 'sun.png';
  venus.src = 'venus2.gif';
  mercury.src = 'mercurySm.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(); 
   var timeDiff = time.getTime() - startTime.getTime();  //<- get the difference in milliseconds from your reference time.

   ctx.rotate(((2*Math.PI)/30000)*timeDiff);  //<-use the reference timediff to set the planet angle
   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)/120000)*timeDiff + ((2*Math.PI)/120)*startTime.getSeconds()); //<-use the reference timediff to set the planet angle, and use the reference time to set the angle offset.
   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秒后重新启动

2 个答案: