Question

我最近使用requestAnimFrame创建了一个画布动画，并且对Chrome中的结果感到非常满意，但在FF中，它看起来正在播放幻灯片。我不知道是什么导致了这个问题。

此外，当我将粒子数从500减少到<50时，FF中的动画是平滑的但仍然不是60FPS。这是我的代码：

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。我在这里做错了吗？

Answer 1

以下是没有globalCompositeOperation引用的方法：

＆＃13;

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();

＆＃13;

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

＆＃13;

requestAnimFrame在Chrome中为60FPS，在FF中为1FPS

1 个答案: