1

フラッシュ要素の上に html 要素 (リストを含むモーダル ウィンドウなど) がある場合、大きなパフォーマンスの問題が発生し、フラッシュのアニメーション中にブラウザがその上にある html を再描画する原因となることが知られています。アニメーション化された canvas 要素の上に html 要素がある場合、同じことが起こるのだろうか。

私はキャンバスゲームを構築しているので、キャンバスに描画せずにDOMを使用してGUI（メニュー、ナビゲーションボタンなど）を作成することをお勧めします。

4

2 に答える 2

2

Chromium バージョン 28.0.1500.45 Mageia.Org 3 (205727) を使用してテストしたところ、キャンバスのアニメーション中に要素が再描画されません。

この単純なボックス アニメーションに DIV を重ねてみました。その後、アプリケーションのプロファイルを作成して、何が起こっているかを確認しました。キャンバスだけが塗り直されていることに気づきました。

window.requestAnimFrame = (function(callback) {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();
var GX = 0;
function animate() {
  var canvas = document.getElementById('jaja');
  var context = canvas.getContext('2d');
  // update
  GX += 10;
  if (GX > 500) GX = 0;
  // clear
  context.clearRect(0, 0, canvas.width, canvas.height);
  // draw stuff
  context.beginPath();
  context.rect(GX, 10, 100, 100);
  context.fillStyle = '#8ED6FF';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'black';
  context.stroke();
  requestAnimFrame(function() {
    animate();
  });
}  // request new frame

続いて、テキストを選択してDIVをリペイントさせてみました。今回ははい、DIV を再描画しました。

これがプロファイルのスクリーンショットです。 ここに画像の説明を入力

1: アニメーションを実行するたびに、ペイント (600x586) が呼び出されていることがわかります。

2: テキストを選択したときにのみ、DIV 要素の Paint が呼び出されました。

個人的には、他のブラウザーがこれとは異なる動作をするとは思いません。

于 2013-07-31T22:55:54.263 に答える