古籏一浩のJavaScriptラボ ― 第14回
HTML5のcanvasで作る画像フィルター
2009年10月07日 10時00分更新
※この記事は「古籏一浩のJavaScriptラボ」の第14回です。過去の記事も合わせてご覧ください。
 |
|---|
現在の主要なWebブラウザーには、グラフィックを自由に描画できる「canvas」機能が用意されています（Internet Explorerを除く）。canvasは、W3C（World Wide Web Consortium）で策定が進んでいる「HTML5」に含まれる新しい要素です。HTML5の仕様はまだ正式に決まっていませんが、canvasは仕様策定の早い段階から盛り込まれていたため、すでに多くのブラウザーに実装されています。また、canvasへの対応が遅れているInternet Explorer（IE）でも、「ExplorerCanvas」などのJavaScriptライブラリーを使えば、ある程度の機能をエミュレートできます。
 |
|---|
| canvasを利用したペイント |
 |
|---|
| canvasを利用すると複雑なグラフィックも簡単に描ける |
canvasのサンプルでは、円や四角形のような図形を描画するものをよく見かけますが、今回のJavaScriptラボでは、ビットマップ画像をピクセル単位で加工する「画像フィルター」を作成してみましょう。画像フィルターといってもさまざまな種類がありますが、今回は以前作成したPhotoshop用の「赤色強調フィルター」をブラウザー用に移植します。
今回のサンプルは、Opera 9.0以降、Firefox 3.5以降、Safari 4以降、Google Chrome 2以降でのみ動作します。ExplorerCanvasライブラリーはピクセル単位の画像処理をサポートしていませんので、残念ながらIEでは動作しません（ただし、どうしてもIEで動かしたい場合の方法は記事の最後に紹介しています）。
■参考サイト
●Operaのcanvasサポート
http://www.opera.com/docs/specs/opera9/canvas/
●Mozilla Canvasチュートリアル
https://developer.mozilla.org/ja/Canvas_tutorial
https://developer.mozilla.org/ja/Drawing_Graphics_with_Canvas
●Safari Canvas
http://developer.apple.com/mac/library/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html
●HTML 5 Working Draft
http://www.w3.org/TR/html5/
●HTML 5.jp
http://www.html5.jp/
「まとめてじっくり読みたい！」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。
HTML5+JavaScript アイデア&実践サンプル
本体 2,800＋税、B5変形判312ページ（オール4色刷）
ISBN：978-4-04-870448-9
この連載の記事
- 第53回 Mac用ウィジェットをHTML/CSSで自作
- 第52回 Web技術で作るDashboardウィジェット開発入門
- 第51回 iOS 4.2×localStorageで作るGPSレコーダー
- 第50回 HTML5 SVGで作るシューティングゲーム
- 第49回 HTML5のInline SVGをJavaScriptで操作
- 第48回 HTML5で注目！インラインSVGの使い方
- 第47回 iOS 4.2の新機能で作るHTML5+JSアプリ
- 第46回 JavaScriptでEPUBビューアーを自作してみた
- 第45回 Audio Data APIでブラウザーをシーケンサーに！
- 第44回 Firefoxでソフトシンセも作れるAudio Data APIの使い方
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
