読者です 読者をやめる 読者になる 読者になる

JSパーティクル崩し

JavaScript

canvasをバイト単位で修正する方法(ImageDataの使い方) | tech.kayac.com - KAYAC engineers' blogを少し改良してFirefoxOperaでも動くようにしてみた。
JSパーティクル崩し
修正点

  • Firefoxcanvas外(幅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の回数を減らしただけ。