JSパーティクル崩し

JavaScript

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の回数を減らしただけ。