かせいさんとこ

canvas のアニメーション高速化ノウハウいろいろ

javascript

これはなに?

• canvas を色々いじってみて取得したノウハウをまとめてみました
• そこそこいじれば、パーティクル 300 個くらいなら ネットブックでもそれなりに動くようです
  • サンプル : http://dl.dropbox.com/u/1094808/particles.html
  • 弾幕シューとかも無理ではなさそう...?

毎回描画するより、putImageData の方が早い

• 必要な図形を初回処理で書いて、getImageData を使って、ImageData オブジェクトを作っておく

ctx.getImageData(left, top, x_size, y_size)

• ただし、putImageDataは、globalCompositeOperation を無視する
• あと、Firefox 3.6.17 現在 描画領域からはみ出すような putImage を行うと例外が発生する
  • 4.x 系は未調査

drowImage の Firefox 特有のバグ

• putImageDataより複雑な事ができるメソッド
• globalCompositeOperation に従ってくれるので、基本的には putImage よりこっちを使うことの方が多そう
• ただし、Firefox では、getImageData で取得した ImageData をそのまま渡すと例外が発生するバグがある
  • Firefox 3.6.17 現在
  • http://stackoverflow.com/questions/982000/firefox-throwing-a-exception-with-html-canvas-putimagedata
• なので、非表示の canvas に putImageData してから、canvas そのものを drowImage しないといけない

  var spriteCanvas = document.createElement('canvas');
  spriteCanvas.setAttribute('width', size*2);
  spriteCanvas.setAttribute('height', size*2);
  var imageData = ctx.getImageData(0, 0, size*2, size*2);
  spriteCanvas.getContext('2d').putImageData(imageData, 0, 0);

非表示の canvas をバッファにして、最後にまとめて 表示用の canvas にコピーしても速度は上がらない

• ゲームとかだと良くやる手だけど、非表示の canvas に描画するときもおんなじ処理をしているっぽい
  • でかいサイズのコピーを行う分、むしろ重くなってる?

参考リンク

• http://www.html5.jp/canvas/
  • canvas の API のドキュメント

• 今更聞けないcanvasの基礎の基礎
  • 基礎的なところをざっくりと紹介している
  • FPS を使った描画速度の制御が参考になりました

Permalink | コメント(0) | トラックバック(0)