1. まとめトップ

HTML5のCanvasによる20個+αのフィルタまとめ

HTML5のCanvasによる画像フィルタ(エフェクト)に絞ってデモ公開しているサイトを集めました。ブラウザの対応状況やパフォーマンスの課題はありますが、インタラクティブな処理が可能なのが魅力ですよね。番外編のほうがインパクト大かも!?

更新日: 2013年03月07日

podspodさん

  • このまとめをはてなブックマークに追加
9 お気に入り 10400 view
お気に入り追加

http://www.devlabo.sakura.ne.jp/labo/effect-transform/
マウスをドラッグした箇所が動的にグネグネとツイスト処理されてくのが気持ちいい。
フィルタは4つで
①twist(ねじる)
②puff(もっこり?)
③invert(逆さ?)
④wave(波)
それぞれに適用サイズや強さも変更可能。

http://d.n-at.me/demo/html5/filter02.html
フィルタが13種類と豊富です。
①グレースケール
②セピア風
③色調の反転
④彩度を下げる
⑤彩度を上げる
⑥ハイコントラスト
⑦ポスタライズ
⑧二値化
⑨ぼかし
⑩シャープ
⑪エッジ検出
⑫アルファ値で輝度を表現
⑬何となくいい感じに

http://rest-term.com/labs/html5/convolution.html
フィルタは4つで
①ぼかし
②シャープ
③エッジ検出
④エンボス

http://rest-term.com/labs/html5/fft.html
上のConvolution Filterと同じサイトです。
フィルタは2つで
①Highpass
②Lowpass
です。

以下、サイトの説明を引用。
二次元離散フーリエ変換 (2D-FFT) による空間周波数フィルタ (ハイパス/ローパスフィルタ) を適用します。

番外編1

フィルタの域を超えたものです。
HTML5によるゲームもいろいろインパクト強いものがあるわけですが、単純にスゴイと思います。

http://code.almeros.com/code-examples/water-effect-canvas/#.Tz3fZrSGh8E
マウスでクリックした箇所から波紋がウネウネと。
雨の強さや1秒あたり何粒とか指定して降らせたりも必見。しばらくハマってしまう。

http://craftymind.com/factory/html5video/CanvasVideo.html
HTML5のVideoタグ再生しながら、マウスクリックするとこんな感じでピースがはじけます。その欠片も再生されてるのがスゴイ。

番外編2

http://en.inforapid.org/
Wikipediaのワードをマインドマップのようにビジュアライズ。動的にたどっていけるのでおもしろい。日本語版作れないかなぁ~。

関連まとめ

「PHPのImageMagickによる25個のフィルタまとめ」
http://matome.naver.jp/odai/2132948506977327601

「iOSアプリ開発に必要な画像フィルタ20個まとめ」
http://matome.naver.jp/odai/2132948970077422001

1