requestAnimFrame Chrome中的60FPS，FF中的1FPS

我最近創建了一個帶有requestAnimFrame的畫布動畫，對Chrome中的結果感到非常滿意，但是在FF中，它看起來正在運行幻燈片。我不知道是什麼導致了這個問題。另外，當我將粒子數從500減少到< 50時，FF中的動畫是平滑的，但仍不在60FPS。這是我的代碼：requestAnimFrame Chrome中的60FPS，FF中的1FPS

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

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    W = window.innerWidth, 
    H = window.innerHeight, 
    circles = []; 

canvas.width = W; 
canvas.height = H; 

//Random Circles creator 
function create() { 

    //Place the circles at the center 

    this.x = W/2; 
    this.y = H/2; 


    //Random radius between 2 and 6 
    this.radius = 2 + Math.random()*3; 

    //Random velocities 
    this.vx = -10 + Math.random()*20; 
    this.vy = -10 + Math.random()*20; 

    //Random colors 
    this.r = Math.round(Math.random())*255; 
    this.g = Math.round(Math.random())*255; 
    this.b = Math.round(Math.random())*255; 
} 

for (var i = 0; i < 500; i++) { 
    circles.push(new create()); 
} 

function draw() { 

    //Fill canvas with black color 
    ctx.globalCompositeOperation = "source-over"; 
    ctx.fillStyle = "rgba(0,0,0,0.15)"; 
    ctx.fillRect(0, 0, W, H); 

    //Fill the canvas with circles 
    for(var j = 0; j < circles.length; j++){ 
     var c = circles[j]; 

     //Create the circles 
     ctx.beginPath(); 
     ctx.globalCompositeOperation = "lighter"; 
     ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false); 
     ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)"; 
     ctx.fill(); 

     c.x += c.vx; 
     c.y += c.vy; 
     c.radius -= .05; 

     if(c.radius < 0) 
      circles[j] = new create(); 
    } 
} 

function animate() { 
    requestAnimFrame(animate); 
    draw(); 
} 

animate();

和here's the live demo。我在這裏做錯了什麼？

來源

2012-07-06 Kushagra

我可以看到一些微小的優化：當你創建一個圓給他們另一個字段的填充樣式，這樣你只需要建立rgba字符串每個對象一次，每次開始時計算2pi，而不是每個循環的每一步，但我懷疑這會產生多大的影響。 – 2012-07-06 17:47:22

問題來自Firefox上昂貴的'ctx.globalCompositeOperation'調用。刪除它們，它將在Firefox中按預期工作。（你並不需要他們） – dievardump 2012-07-06 17:58:57

這裏是如何工作的，而不globalCompositeOperation引用：

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

 
var canvas = document.getElementById("canvas"), 
 
    ctx = canvas.getContext("2d"), 
 
    W = window.innerWidth, 
 
    H = window.innerHeight, 
 
    circles = []; 
 

 
canvas.width = W; 
 
canvas.height = H; 
 

 
//Random Circles creator 
 
function create() { 
 

 
    //Place the circles at the center 
 

 
    this.x = W/2; 
 
    this.y = H/2; 
 

 

 
    //Random radius between 2 and 6 
 
    this.radius = 2 + Math.random()*3; 
 

 
    //Random velocities 
 
    this.vx = -10 + Math.random()*20; 
 
    this.vy = -10 + Math.random()*20; 
 

 
    //Random colors 
 
    this.r = Math.round(Math.random())*255; 
 
    this.g = Math.round(Math.random())*255; 
 
    this.b = Math.round(Math.random())*255; 
 
} 
 

 
for (var i = 0; i < 500; i++) { 
 
    circles.push(new create()); 
 
} 
 

 
function draw() { 
 

 
    //Fill canvas with black color 
 
    ctx.fillStyle = "rgba(0,0,0,0.15)"; 
 
    ctx.fillRect(0, 0, W, H); 
 

 
    //Fill the canvas with circles 
 
    for(var j = 0; j < circles.length; j++){ 
 
     var c = circles[j]; 
 

 
     //Create the circles 
 
     ctx.beginPath(); 
 
     ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false); 
 
     ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)"; 
 
     ctx.fill(); 
 

 
     c.x += c.vx; 
 
     c.y += c.vy; 
 
     c.radius -= .05; 
 

 
     if(c.radius < 0) 
 
      circles[j] = new create(); 
 
    } 
 
} 
 

 
function animate() { 
 
    requestAnimFrame(animate); 
 
    draw(); 
 
} 
 

 
animate();

<canvas id="canvas"></canvas>

來源

2017-09-28 06:42:00

requestAnimFrame Chrome中的60FPS，FF中的1FPS

回答

相關問題