君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
glfx.js - JavaScriptで画像を加工 MOONGIFT
画像を加工する場合、画像編集ソフトウェアが使われます。そして加工したファイルを保存し、Web上にアップロードするでしょう。しかしこの場合、再度編集する際に備えて元ファイルは保存しておかなければなりません。また、同じ加工を何十枚もの画像に施すのも大変です。 そこで使ってみたいのがglfx.jsです。JavaScriptを使ってWebブラウザ上で画像を加工するソフトウェアです。 glfx.jsの使い方 元画像です。 マウスがあるところに渦巻きが描かれます。 ノイズ。 周囲を暗くします。 ぼかし。ぼかしの位置も変更できます。 マウスの当たっている場所を少し拡大します。 ドット変換。 昔の写真のように粗いドット。 glfx.jsを使うと元の画像は変えないままにフィルタリングをかけられます。画像全体だけでなく、マウスがある場所だけに施すことも可能です。フィルタリングの種類も多様で、様々な加工が施せる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
