このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第14回

HTML5のcanvasで作る画像フィルター

2009年10月07日 10時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「古籏一浩のJavaScriptラボ」の第14回です。過去の記事も合わせてご覧ください。

JSラボ

 現在の主要なWebブラウザーには、グラフィックを自由に描画できる「canvas」機能が用意されています(Internet Explorerを除く)。canvasは、W3C(World Wide Web Consortium)で策定が進んでいる「HTML5」に含まれる新しい要素です。HTML5の仕様はまだ正式に決まっていませんが、canvasは仕様策定の早い段階から盛り込まれていたため、すでに多くのブラウザーに実装されています。また、canvasへの対応が遅れているInternet Explorer(IE)でも、「ExplorerCanvas」などのJavaScriptライブラリーを使えば、ある程度の機能をエミュレートできます。

fig1-1
canvasを利用したペイント
fig1-2
canvasを利用すると複雑なグラフィックも簡単に描ける

 canvasのサンプルでは、円や四角形のような図形を描画するものをよく見かけますが、今回のJavaScriptラボでは、ビットマップ画像をピクセル単位で加工する「画像フィルター」を作成してみましょう。画像フィルターといってもさまざまな種類がありますが、今回は以前作成したPhotoshop用の「赤色強調フィルター」をブラウザー用に移植します。

 今回のサンプルは、Opera 9.0以降、Firefox 3.5以降、Safari 4以降、Google Chrome 2以降でのみ動作します。ExplorerCanvasライブラリーはピクセル単位の画像処理をサポートしていませんので、残念ながらIEでは動作しません(ただし、どうしてもIEで動かしたい場合の方法は記事の最後に紹介しています)。


書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。

HTML5+JavaScript アイデア&実践サンプル

本体 2,800+税、B5変形判312ページ(オール4色刷)
ISBN:978-4-04-870448-9

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング