Javascript 在铬合金中为60帧每秒，在FF中为1帧每秒

我最近用

requestAnimFrame

创建了一个画布动画，对Chrome中的结果非常满意，但在FF中，它看起来是一个幻灯片。我不知道是什么导致了这个问题

---

另外，当我将粒子数从500减少到时，这是如何在没有

globalComposite操作

参考的情况下工作的：

window.requestAnimFrame=（函数（）{
return window.requestAnimationFrame | |
window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.oRequestAnimationFrame | |
window.msRequestAnimationFrame | |
函数（回调）{
设置超时（回调，1000/60）；
};
})();
var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
W=窗宽，
H=窗内高度，
圆圈=[]；
画布宽度=W；
canvas.height=H；
//随机圈创建者
函数create（）{
//将圆放在中心
该点x=W/2；
这个y=H/2；
//2到6之间的随机半径
this.radius=2+Math.random（）*3；
//随机速度
this.vx=-10+Math.random（）*20；
this.vy=-10+Math.random（）*20；
//随机颜色
this.r=Math.round（Math.random（））*255；
this.g=Math.round（Math.random（））*255；
this.b=Math.round（Math.random（））*255；
}
对于（变量i=0；i<500；i++）{
圆。推送（新建（））；
}
函数绘图（）{
//用黑色填充画布
ctx.fillStyle=“rgba（0,0,0,0.15）”；
ctx.fillRect（0,0,W,H）；
//用圆圈填充画布
对于（var j=0；j
我可以看到一些微小的优化：当你创建一个圆时，给它们另一个字段填充样式，这样你只需要为每个对象构建一次rgba字符串，并且在开始时计算2pi，而不是在每个圆的每个移动上，但我怀疑这会有多大的不同。问题来自于在Firefox上昂贵的
ctx.globalCompositeOperation
调用。删除它们，它将在Firefox中正常工作。（你真的不需要它们）
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();