千葉商科大学Web動画表現 2011年度
第７回：HTML5 Canvas + JavaScriptで図形を描く
今回は、ここまで数回にわたって紹介してきたjQueryからさらに一歩進んで、HTML5を使用した動的なコンテンツの世界に踏み込んでいきます。
今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。
HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、canvas要素と連動するJavascriptという言語がキーとなります。まず最初にこのcanvas要素とJavascriptの基本についてみていきましょう。