5

我想知道为什么这个简单的球移动代码在 IE 和 Chrome 中运行流畅，而在 Firefox 中它看起来很慢，尽管它保持相同的 FPS 速率。

我需要做什么才能在所有浏览器中实现相同的平滑移动？

var canvas,canvasContext,
    ball,txt_shadow,txt_fps,
    speed,angle;        

function init() {

    canvas = document.getElementById("canvas");
    canvasContext = canvas.getContext("2d");
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    stage = new createjs.Stage(canvas);
    stage.autoClear = true;

    txt_shadow= new createjs.Shadow("black", 1, 1, 0);

    ball = new createjs.Shape();
    ball.graphics.beginFill("red").drawCircle(0, 0, 40);

    txt_fps = new createjs.Text("", "18px Arial", "white");
    txt_fps.shadow=txt_shadow;
    txt_fps.x=canvas.width/2;txt_fps.y=100;

    stage.addChild(txt_fps,ball);

    ball.x=canvas.width/2;ball.y=canvas.height/2;
    angle=Math.random()*360;
    speed=8;

    createjs.Ticker.addListener(window);
    createjs.Ticker.setFPS(60);

} 

function tick() {    

    fps=createjs.Ticker.getMeasuredFPS();
    txt_fps.text=Math.round(fps);    
    ball.x += Math.sin(angle*(Math.PI/-180))*speed;
    ball.y += Math.cos(angle*(Math.PI/-180))*speed;

    if (ball.y<0 || ball.x<0 || ball.x>canvas.width || ball.y>canvas.height) {
        angle+=45;
    }
    stage.update();

}
4

1 回答 1

1

画布文本渲染很慢。<canvas>通过在其中生成文本而不是将 FPS 写入单独的元素，您对自己造成了伤害。

但是您可以用来加速已经编写的内容的一种技术是限制某些计算成本高昂的任务（渲染 FPS）与最关键的任务（球弹跳）的运行频率不同。

EaselJS 不允许您指定某些任务更频繁地运行。（createjs.Ticker.setFPS是一个静态函数。）所以我们需要创建一个解决方法。

true这是一个每 60 次调用它就会返回一次的闭包。

var onceEverySixty = (function(){
    var i = 0;
    return function(){
        i++;
        return ((i % 60) == 0);
    }
})();

使用这个闭包，我们可以在你的代码中实现它来限制 FPS 文本被更新的次数：

function tick(){
    if(onceEverySixty()){
        fps=createjs.Ticker.getMeasuredFPS();
        txt_fps.text=Math.round(fps);
    }
    // The ball-drawing code here, outside the conditional
}
于 2013-12-29T23:20:22.640 回答