Javascript 计算HTML5画布中的总帧丢失

我有一个HTML5画布应用程序，使用requestanimationframe设置动画

我有一个计数器变量，它计算显示的帧数。据我观察，requestanimationframe被限制为60fps（至少在Chrome和Opera中是如此）

首先，requestanimationframe限制为60fps是真的吗

---

第二，如何计算一个变量中丢失了多少帧？例如，如果fps下降到60以下持续1秒，将差值添加到第二个变量中的60 fps，以便最终计算n秒期间可能显示的最大帧数。

为什么是60 fps？

w3c建议requestAnimationFrame（RAF）在浏览器刷新时以相同的间隔触发。RAF图纸和显示硬件之间的同步降低了“撕裂”（显示不完整图纸）的可能性

因此，大多数浏览器尝试每秒启动RAF回调60次，以匹配大多数显示刷新率

调整“掉帧”

RAF可能会出于多种原因“丢弃”帧，包括垃圾收集等系统活动或需要超过1/60秒才能完成的绘图

RAF的最新版本向其回调函数发送时间戳

function animate(timestamp){
    requestAnimationFrame(animate);
}

此时间戳允许您根据经过的时间进行绘制，而不仅仅是循环执行的次数

var lastTime;

function animate(timestamp){

    requestAnimationFrame(animate);

    if(!lastTime){lastTime=timestamp;}

    var elapsed=timestamp-lastTime;

    // draw based on elapsed time rather than 
    // based on # times animate() has executed

}

例如，如果在画布上以每帧1像素的速度设置对象的动画，则理想情况下，该对象将在1秒内移动60像素

如果删除了任何帧，您可以使用时间戳来确定基于时间而不是基于循环执行的次数绘制对象的位置

var lastTime;

function animate(timestamp){

    requestAnimationFrame(animate);

    if(!lastTime){lastTime=timestamp;}

    var elapsed=timestamp-lastTime;

    // draw based on elapsed time rather than 
    // based on # times animate() has executed

}

因此，在本例中，如果第10帧被删除，则下一帧可以使用时间戳基于时间绘制对象+11像素（即使循环仅执行了10次）