Javascript 以60fps的速度创建秒表/计时器以及画布动画

我试图在一些画布动画旁边创建一个计时器。动画使用设置为60 fps的函数循环刷新画布并重新绘制对象。我能想到的制作秒表的唯一方法是使用相同的循环，以每帧毫秒为单位，将其添加到文本对象中。我只是想知道有没有更有效的方法

var frame = 0;
canvas.setLoop(function() {
    if(particle.x < 1080 && particle.x > 0){
        frame++;
        particle.x = 540 + (acc*frame*frame)/120;
        gField.t.text = "g = 9.81ms⁻²\nMass = "+particle.mass+"kg\nF = ma\nFrame: " + frame + "\nDistance: " + (particle.x - 540).toFixed(1);
        stopwatch();
    }else{
        canvas.timeline.stop();
    }
})
var sec = 0;
var tsec = 0;
var hsec = 0;
function stopwatch(){
    hsec+= (5/3);
    if(hsec >= 10){
        tsec++;
        hsec = hsec -10;
    }
    if(tsec >= 10){
        sec++;
        tsec = tsec-10;
    }
    time.text = (sec)+":"+(tsec)+(hsec).toFixed(0);
}
var clicks = 0
control.button.bind("click tap", function() {
    clicks++;
    if(clicks == 1){
        canvas.timeline.start();
    }else{
        clicks = 0;
        canvas.timeline.stop();
    }
})

var帧=0；
canvas.setLoop（函数（）{
if（particle.x<1080&&particle.x>0）{
frame++；
粒子x=540+（acc*帧*帧）/120；
gField.t.text=“g=9.81ms⁻²\nMass=“+particle.mass+”kg\nF=ma\nFrame:“+frame+”\n状态：“+（particle.x-540）.toFixed（1）；
秒表（）；
}否则{
canvas.timeline.stop（）；
}
})
var-sec=0；
var-tsec=0；
var-hsec=0；
功能秒表（）{
hsec+=（5/3）；
如果（hsec>=10）{
tsec++；
hsec=hsec-10；
}
如果（tsec>=10）{
sec++；
tsec=tsec-10；
}
time.text=（秒）+：“+（tsec）+（hsec）.toFixed（0）；
}
var=0
control.button.bind（“点击”，函数（））{
点击++；
如果（单击==1）{
canvas.timeline.start（）；
}否则{
点击次数=0；
canvas.timeline.stop（）；
}
})

---

另外，这是一个动力学模拟程序。我正在使用oCanvas库制作画布动画。

使用requestAnimationFrame，因为这是使用JavaScript获得的最精确的计时器，另外，它将为您提供高分辨率的时间戳：

var ctx=canvas.getContext（'2d'），
startTime=null，
lastTime=null，//表示比例
isRunning=false，
FPS=1000/60，
x=0，
dx=4；//理想帧速率
函数循环（时间戳）{
如果（！startTime）startTime=时间戳；
var timeDiff=lastTime？timeStamp-lastTime:FPS，
时间流逝=时间戳-开始时间，
timeScale=timeDiff/FPS；//调整帧速率的变化
lastTime=时间戳；
ctx.clearRect（0,0，canvas.width，canvas.height）；
//使用时间刻度完成你的工作，即：
//位置x+=速度x*时间刻度
x+=dx*时间刻度；
如果（x<0 | | x>canvas.width-1）dx=-dx；
ctx.fillRect（x，0,8,8）；
ctx.fillText（（时间经过*0.001）.toFixed（4,10,50）；
ctx.fillText（时间刻度为toFixed（1）、10、90）；
如果（正在运行）请求动画帧（循环）；
}
ctx.font=“40px无衬线”；
btnToggle.addEventListener（“单击”，函数（）{
如果（正在运行）{
isRunning=false；
this.innerHTML=“开始”；
}否则{
startTime=lastTime=null；
isRunning=true；
requestAnimationFrame（循环）
this.innerHTML=“停止”；
}
}，假）


开始时
请记住，您不能保证每分钟60帧。如果f.e.你的客户端pc速度慢，它可能会下降。你必须用Date（）检查时间才能得到一个支持时间。也许这有助于获得客户的FPS：是的！这看起来非常适合我想做的事情。谢谢，调用循环函数时，我看不到时间戳是如何初始化的。请使用
requestAnimationFrame（loop）
启动循环。英国皇家空军将初始化它。希望这有帮助！谢谢所以我猜时间戳是raf每次呼叫之间的时间？@JimiiBee是从循环开始经过的时间。只需减去循环停止时的开始时间即可获得差异。您也可以使用
performance.now（）
（rAF在内部使用）。但是，较旧的浏览器可能不支持此功能。