JSパーティクル崩し
canvasをバイト単位で修正する方法(ImageDataの使い方) | tech.kayac.com - KAYAC engineers' blogを少し改良してFirefox、Operaでも動くようにしてみた。
JSパーティクル崩し
修正点
- Firefoxはcanvas外(幅100pxのcanvasにx:100.1とか)にputImageDataしようとするとエラーになるのでそれを回避するように
- OperaはCanvasRenderingContext2D.prototype.createImageDataが実装されてないなので、代わりにnew ImageDataを使う(そのうち修正されるでしょう)
// for Opera 10.5- if (window.CanvasRenderingContext2D && !CanvasRenderingContext2D.prototype.createImageData && window.ImageData) { CanvasRenderingContext2D.prototype.createImageData = function(w,h) {return new ImageData(w,h) }; }
主な修正はその2点だけですが、ソース読みながら弄って遊んでたのでちょこちょこ変わってます(zoomに対応してる場合は2倍拡大にしたり)。
割と本気でチューニングしてみた。JSパーティクル崩しといってもJIT頼りで細かいところは弄ってない。要はputImageDataの回数を減らしただけ。