画布将在 60 秒后重新启动

canvas restarts after 60 seconds

本文关键字：重新启动      更新时间：2023-09-26

我试图用画布做一个太阳系。一切都很顺利，除了我想让每个星球以不同的速度移动。但是，如果我在 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);  
}

演示

向下滚动一点。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 );

演示

问题是您使用实际的时钟秒和毫秒来设置角度。 当时钟秒数达到0时，金星的角度又回到0:)。 如果您将行星的位置基于绝对时间而不是每分钟时间，则不会重置。 我更新了您的代码笔以说明：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);  
}
相关文章：