2

次のアドレスのコードから始めました。

http://demos.sixrevisions.com/2010/09/11/demo.html

次のように requestAnimFrame を使用するように更新しました。

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

デモはこちらから入手できます：

http://jsfiddle.net/XBssp/1/

Chrome で実行している私の目には、アニメーションは高速でも少しぼやけて見えます。さらにどのような最適化を行うことができますか?

4

2 に答える 2

2

ぼやけたとはどういう意味ですか?

いずれにせよ、このコードを最適化したい場合は、次のことを調整できます。

//put this outside the loop, no need to get it everytime
context= myCanvas.getContext('2d');

//record previous position and size and only clear that area
//instead of the complete canvas for each time
context.clearRect(0,0,300,300);

//pre-render this object to an off-screen canvas and use
//drawImage(osCanvas, x, y) instead
context.beginPath();
context.fillStyle="#0000ff";
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();

もちろんrequestAnimationFrame、利用可能な場合は使用して、アニメーションをモニター vblank と同期させます (ジャークを排除します)。

ただし、メインループ内に配置してください。

これらの最適化の結果は次のとおりです:
http://jsfiddle.net/AbdiasSoftware/XBssp/6/

非常に多くの DOM 要素と iframe がない場合:
http://jsfiddle.net/AbdiasSoftware/XBssp/6/embedded/result/

DOM の更新については何もできないため、イベント キュー内の再描画やその他のイベントの影響を減らすには、同じウィンドウに他の要素をできるだけ少なくすることをお勧めします。可能であれば、要素には固定位置または絶対位置を使用し、ドロップ シャドウや丸みを帯びた境界線は避けてください。

最適化されたアプローチのソース出力:

function draw() {
    //here we only clear last draw and draw the cached ball
    context.clearRect(oldX - 2, oldY -2 ,dia +4,dia +4);
    context.drawImage(canvas,x, y);

    oldX = x; //store the current x/y as old x/y for next loop
    oldY = y;

    if( x<0 || x>300) dx=-dx;
    if( y<0 || y>300) dy=-dy;

    x+=dx;
    y+=dy;
    requestAnimationFrame(draw);
}

//function to create cached ball
function createBall() {
    canvas = document.createElement('canvas');
    canvas.width = dia;
    canvas.height = dia;
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.fillStyle="#0000ff";
    ctx.arc(rad,rad,rad,0,Math.PI*2,true);
    ctx.fill();
}

createBall(); //create ball
draw();       //start anim
于 2013-06-22T00:36:25.527 に答える