アニメーション
Canvasのデモではよくアニメーションが使われます。しかし、Canvasは、アニメーションのオーサリング機能を一切持ち合わせていません。名前の通り、キャンバスに絵を描く機能に特化したテクノロジーです。
しかし、描画が非常に高速なため、パラパラマンガのように1コマずつ描き直すことで、非常になめらかなアニメーションを実現することが可能となります。また、ゲームにも応用が可能です。
Canvasがいくら描画が早いとはいえ、限界はあります。Canvasは描く領域が大きければ大きいほど、パフォーマンスが低下します。また、iPhoneなどのスマートフォンでもCanvasを利用することができますが、やはりパソコンと比べると、Canvasの描画パフォーマンスは大幅に劣ります。アニメーションを作る際には、利用されるデバイスに応じて描画サイズを考慮する必要があります。
ピクセル操作
Canvasの最も特徴的な機能にピクセル操作があります。ビットマップ・グラフィックスゆえに可能となる機能です。ピクセル操作とは、描かれたビットマップのピクセル単位の色情報を取得し、それを操作することです。
このデモでは、中央にvideo要素を使ってビデオが再生されます。そして、ビデオの左右に反射光が描画されています。もちろん、ビデオ再生中は、再生されているイメージにあわせて反射光もリアルタイムに変化していきます。
Canvasには、video要素によって表示されているビデオの1コマや、img要素によって表示されている画像を取り込むことが可能です。このデモでは、Canvasにビデオのコマのイメージを取り込んだ後、ピクセルごとの色情報をJavaScriptで取得し、反射光の色を算出し、それをCanvasに描いているのです。
Canvasの実際の使い方については、すでにネットまたは雑誌や書籍などでも数多く紹介されていますが、筆者が運営するサイトでもチュートリアルとリファレンスを用意しているので、参考にしていただければ幸いです。
今回はHTML5で新たに導入されたvideo要素、audio要素、canvas要素について解説しましたが、HTML、CSS、JavaScriptといったウェブテクノロジーだけで実現できる範囲が大幅に広がったことを感じていただけたかと思います。次回は、ウェブフォームについて解説していきます。
