canvas のアニメーション高速化ノウハウいろいろ
これはなに?
- 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 をそのまま渡すと例外が発生するバグがある
- なので、非表示の 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 に描画するときもおんなじ処理をしているっぽい
- でかいサイズのコピーを行う分、むしろ重くなってる?
