HTML5 Rocks

HTML5 Rocks

HTML5 機能

グラフィック

ウェブは今までも視覚的媒体でしたが、常に制限がありました。最近まで、HTML デベロッパーが、ウェブサイトにアニメーションや視覚的効果を取り入れるには、CSS や JavaScript を使用するか、Flash のようなプラグインに頼るしかありませんでした。

canvas 要素、WebGL、SVG 画像などの技術が追加されて、状況が一変しました。2D canvas、WebGL、SVG、3D CSS 変形、SMIL など、ウェブ上でグラフィックを扱うさまざまな新機能があります。

新機能

The Future is Now!

もちろん、これらの新しい技術は処理速度が速くなければ意味がありません。幸いなことに、JavaScript エンジンでは 3D ゲームの実行や動画のリアルタイム操作に対応できるだけの速度で処理できるようになりました。多くのブラウザでは、ハードウェア アクセラレーションによる画像処理の実装も進んでおり、CSS のトランジションと変形処理もさらに滑らかに行われるようになります。

デベロッパーはこれらの機能を大いに活用しています。実際、ウェブ上では HTML グラフィックのデモが次々と公開されており、その内容は 2D グラフィック アルゴリズムの実装から最新のウェブを想定した新たな手法まで多岐にわたります。

ブラウザ サポート

「グラフィック」という分野で扱う内容は多岐にわたり、その中には現在策定中の仕様がいくつかあります。包括的なグラフィックのデモでは、以下のうち複数を利用している場合があります:

Click each specification to see its support status on caniuse.com. Chrome-specific details can be found on the Chrome Platform Status.

デモ

活用例

An interactive film by Chris Black
3 Dreams of Black
Online music video from the Arcade Fire
The Wilderness Downtown
Online drawing application
deviantART muro
SVG support via svgweb
Wikipedia

リソース

  • svgweb あらゆるブラウザで SVG に対応します
  • Adobe Illustrator HTML5 pack Illustrator 向けの SVG、CSS、canvas サポートです
  • Raphaël SVG アニメーション ライブラリです
  • cakejs canvas 要素向けの JavaScript シーングラフ ライブラリです
  • Processing.js アニメーション スクリプト言語を Javascript に処理するポート - canvas を使用しています
  • three.js canvas、SVG、WebGL を使用する軽量版 3D エンジンです
  • GPU Accelerated Compositing in Chrome ハードウェア アクセラレーションによる画像処理を Chrome に実装した背景とその詳細を説明しています