CodeZine(コードジン)

特集ページ一覧

HTML5で実現できるマルチメディア系機能
ここが違う!サンプルで見るHTML5(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/12/16 14:00

目次

アニメーション

 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といったウェブテクノロジーだけで実現できる範囲が大幅に広がったことを感じていただけたかと思います。次回は、ウェブフォームについて解説していきます。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ここが違う!サンプルで見るHTML5

著者プロフィール

  • 羽田野 太巳(ハタノ フトミ)

    有限会社futomi 代表取締役 1971年岐阜県生まれ。 ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。 オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。 20...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5