CANVAS要素(HTML5)(導入)

トップページプログラミング技術等

CANVASは、HTML5の要素の一つで、JavaScriptのプログラムにより、Flash同様の動的な2次元画像の表示が可能になる。現在のところFirefox、Opera、Google Chromeといったブラウザでは表示可能だが、IEは最新のものしか対応しない(XPで動く8.0以前では駄目なようである。但し、表示を可能とするプラグインは存在する)。JavaScriptで動作するので、Flashのように特定の開発環境で.swfファイルを予め作成する必要はない。この各ページに挙げたhtmlファイルを、Google Chromeで開けば、直ちに動画が動く(htmlファイルを自分のPCで動かす場合は、画像は別途、用意する必要はある)。

CANVASでの直線運動

CANVASでの曲線・回転運動

CANVASで複数の画像を別々に動かす

CANVASでのフェードアウト、拡大・縮小

CANVASでのイベント(クリック、キー操作等)処理

CANVASで図形を描画する