canvasをいじってみる（その１）

友人が多数使っていたり会社の同僚さんに勧められたりしたので、拙筆ながら時代の流れに乗って技術関連のことを徒然なるままに書き連ねてみたいと思う。

現在もまだ使用策定中のHTML5の一部であるcanvas要素。
だいぶ前に書いたデモ的なプログラムを紹介。

canvasアニメーション - jsdo.it - share JavaScript, HTML5 and CSS

横幅を大きく作りすぎていて見づらいです。スイマセン。
Flashじゃありません。
特にライブラリとかもつかっていません。
すでにHTMLとJavaScriptとブラウザだけでこれだけのことができるようになっててビックリ。

以下コード解説。

-----

グローバル変数。
フレームレート、重力の強さ、ハコの大きさなどの定義。
ボール用クラス。
自分自身の位置（XY座標）、大きさ（半径）、速度、加速度のパラメータを持っていて、これらに従ってmoveメソッドで自分自身の位置を変化させる。

1. 加速度は速度、速度はボールの位置にそれぞれ作用
2. 床に接触した場合Y方向の速度が、垂直な壁に接触した場合はX方向の速度がそれぞれ反転（スピード * -1)する。
3. drawメソッドを呼ぶと描画。

ハコの描画と画面クリア用function
onloadイベントで呼び出されるメイン処理。
重力のセットやボールの生成などの初期化処理が走ったあと、画面描画用のループが回る。

高校レベルの物理と数学の知識があれば簡単に作れると思います。
まだまだ性能がFlashに及ばないし仕様すら策定中の技術ですが、Audio APIとかWebStorageなどと組み合わせれば面白いものができそうな気がする。
そのアイデア出しが難しいんだけども…。