HTML Canvasでほかし処理してみる

な、なんだってー(AA略

「Internet Explorer 9 Preview 3」公開 Canvas要素、ハードウェアアクセラレーションに対応:CodeZine

IE! IE! IE! マイクロソフト、本気です。

IE9canvas要素の実装により、今後、主要ブラウザ全てがcanvas対応になります。iPhoneiPad向けのサイトでは既にcanvasを使えますが、iPhone以外では使えない仕様では躊躇するかもしれません。しかし、もう心配いりません。canvasはPCサイトでも使える仕様となるのでiPhoneサイトでやったことは無駄になりません。

この先、canvasのパワーを生かしてネイティブアプリに負けない表現力をもったWebアプリが続々登場するでしょう。

というわけでHTML Cavansで画像処理してみるシリーズ。今日はぼかし処理(ブラー)を書いてみました。

https://nullpon.moe/dev/sample/canvas/blur.html

ぼかし処理は、周囲8ピクセルの平均値を新しいピクセルにするだけなので簡単です。気をつけることは、画像の端は周囲に8ピクセル無いので処理を分ける必要があることです。多少ソースが長くなっても端の判定をif文で行うよりも、最初から別に処理にしたほうが良いでしょう。