5

同じ FPS レートを維持しているにもかかわらず、この単純なボール移動コードが IE と Chrome ではスムーズに実行され、Firefox では遅く見える理由を知りたいです。

すべてのブラウザで同じスムーズな動きを実現するにはどうすればよいですか?

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 を別の要素に書き込むのではなく、内部でテキストを生成することで、自分自身に害を及ぼしています。

しかし、すでに書かれていることを高速化するために使用できるテクニックの 1 つは、特定の計算コストの高いタスク (FPS のレンダリング) を、最も重要なタスク (ボールの跳ね返り) と同じ頻度で実行しないように制限することです。

EaselJS では、特定のタスクをより頻繁に実行するように指定することはできません。(createjs.Ticker.setFPSは静的関数です。) したがって、回避策を作成する必要があります。

trueこれは、呼び出された 60 回ごとに 1 回戻るクロージャーです。

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 に答える