canvas要素にsvgのfilterを掛ける

defghi1977

License: MIT License

Fork
1
Fav
4
View
1977
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 0 lines
  • HTML 74 lines
  • CSS 21 lines
svgのfilter機能をcanvas要素に応用するもの

canvas要素はピクセル操作が出来るなど非常に柔軟な処理を実現できるものの,
画像処理を施すアルゴリズムを自力で作成するのは非常に面倒です.

そこで画像処理に長けたsvgのfilter機構をcanvas要素に応用することを考えました.
svgでは画像処理を原始フィルタのパイプ処理として簡潔に記述することが出来るため
管理が非常に容易です.

canvas→svg→img→canvas
と言ったようにグルグルとサイクル的に処理できるため,
対話的に画像処理を掛けると言ったことも可能です.
(処理結果をpng形式として保存することも可能です.)
要するにwebブラウザでありながら工夫次第でなんちゃってphotoshopみたいなことも出来るわけです.

NOTE:canvas要素にcssからfilterを掛けているわけでない点に注意して下さい.

最新のfirefoxとchromeでの動作を確認しました.
  • canvas要素にsvgのfilterを掛ける
  • canvas要素にsvgのfilterを掛ける

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

defghi1977

Author

svgはいんすぴれーしょん http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm 重箱の隅っこをつっついて,にんまり. ドキュメントにまとめて,にっこり.

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by