CanvasとJavaScriptへ移行するFlashコンテンツ


HTML5の機能のうち特に注目されている要素がCanvasだといわれている。Canvasはdivと同様にページの中で単純に矩形の領域をとり、JavaScriptによって洗練されたグラフィックスを描画することができる。

Canvasは、もともとApple社により、Safariの画像描画機能として開発された。Apple社は、W3Cの会合において、Canvasに関連する特許をロイヤリティフリーのライセンスで公開した。

Canvasの描画命令は、SVGと異なり、呼び出された瞬間に実行される。Canvasには、描画前に階層的な描画オブジェクトを保持するような中間的なデータ構造がないため、性能を犠牲にすることなく描画処理を積み重ねられる。

Canvas要素は、IE,Firefox,Chrome,Opera,Safariなど、主要なブラウザでサポートされている。

Canvasには、ベクターとビットマップの両方のコマンドが少数精鋭で用意されている。これらのコマンドは様々なアプリケーションで利用できる。ベクターとビットマップの違いは次のようになる。

ベクター:直線や曲線を数学的な表現で定義する。画質を損ねることなく任意に拡大できる。エッジや細部は非常に鋭い。グラフや地図などの大きな領域が単一の色やグラデーションで塗りつぶされていて詳細の密度が粗い画像に向いている。

ビットマップ:画像はJPEGフォーマットと同様に、さまざまな色のピクセルが集まったグリッドとして定義される。拡大縮小には向かない。写真のような粒度の画像に適している。

Canvasの最終的な出力は、ビットマップになる。拡大する際は、新しい拡大率でベクターコマンドを実行して再描画しなければならない。

Adobeの公式ブログには、FlashからHTML5への移行をデベロッパーに推奨するメッセージが出されている。

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です