画布FPS在调整屏幕大小时发生变化-Javascript

The canvas FPS changes on resizen the screen - Javascript

本文关键字：变化 -Javascript 小时 FPS 调整 屏幕 画布      更新时间：2024-05-02

所以我正在构建一个简单的粒子系统，我想对每个屏幕都做出响应。我在其他地方使用了一个调整大小的脚本来将画布添加到整个浏览器中。

问题是，当你调整屏幕大小时，fps越来越高，粒子下降得很快，我不知道是什么问题！

http://jsfiddle.net/gikdew/J6vLg/5/

 function initialize() {
    // Register an event listener to
    // call the resizeCanvas() function each time 
    // the window is resized.
    window.addEventListener('resize', resizeCanvas, false);
    // Draw canvas border for the first time.
    resizeCanvas();
}
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    game();
}

function game() {
    var tick = 0;
 window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / fps);
              };
    })();
    (function animloop(){
        requestAnimFrame(animloop);
        createParticles();
        updateParticles();
        killParticles();
        drawParticles();       
})();
    animloop();

这是因为每次调整大小时都会在game()内部启动一个新循环。由于rAF是异步的，每次调用都会累积，从而影响您正在使用的变量。

如果你把循环放在外面，你应该没事（你也可以用一个标志来阻止几次运行）：

/// this should in global scope:
window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / fps);
              };
    })();

然后是主要代码：

var isRunning = false;
/// do needed stuff here
function game() {
    var tick = 0;
}
/// call manually the first time before loop starts
game();
/// run loop
(function animloop(){
    requestAnimFrame(animloop);
    createParticles();
    updateParticles();
    killParticles();
    drawParticles();       
})();
相关文章：