标签：javascript html5 canvas requestanimationframe

在我的应用程序中,我有一个CSS大小(CSS,而不是html)更新的画布,具体取决于窗口大小.

我有一个主要的gameplayLoop,看起来像这样：

run = function(){

    console.log(timerDiff(frameTime));

    game.inputManage();
    game.logics();
    game.graphics.animate();
    game.graphics.render();

    frameTime = timerInit();

    requestAnimFrame(run);

}

我的requestAnimFrame函数来自Paul Irish：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

所以基本上问题是我记录的定时器测量requestAnimFrame调用和有效函数调用之间的时间完全改变.
如果我的浏览器是全屏的,我会得到50/60毫秒,如果我有一个小窗口,我可以达到10毫秒.

由于requestAnimFrame调用应该在60fps节奏下持续调用该函数(我认为这是30毫秒)我不应该有这种结果,因为在计时器的创建和它的检查之间基本上没有发生任何事情,除了requestAnimFrame

我也有一些反复的微冻结(不到一秒钟),每2/3秒发生一次.但是计时器没有检测到任何时间的变化(就像javascript的时间计数器被阻止一样)

我的定时器功能是这样的,但这并不重要

timerInit = function()
{
    return new Date();
}

timerDiff = function(datePrev)
{
    return new Date().getTime() - datePrev.getTime();
}

解决方法:

好吧,该标准基本上表示requestAnimationFrame将“尽力”以“一致”的帧速率运行.这不能保证60fps;它只是说它会尽可能快地制作动画.

不幸的是,到目前为止,我对它的体验与你的一样黯淡.我最终回到了setTimeout.它的速度大致相同,图形更新是准确的,并且不像跳过requestAnimationFrame那样跳过节拍.当然它不是60fps,但至少你可以知道发生了什么.

我确信性能只会随着浏览器开发人员优化新功能而改善,但暂时考虑回到超时.

编辑：我想提醒一下,这是一年前回答的,时代已经改变:)

标签：javascript,html5,canvas,requestanimationframe
来源： https://codeday.me/bug/20190716/1481212.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。