canvas-animation

テーマ

ライブラリを使わないでオブジェクト指向を意識しつつJSでアニメーションを作る

---

Web(ブラウザ)でアニメーション

数パターンある
（今回はこの内Canvas APIの2Dを学びます）

DOM

• HTMLやCSSを操作

Canvas API

• HTMLのCanvas要素内でアニメーション
  • 2D
  • 3D(WebGL)

SVG

• XMLベースなのでDOM操作と同じ要領

---

CanvasとDOMの違い

• Canvasは一つの要素内で画像を動的に生成する
  • オブジェクトを生成しないので座標等の状態管理を自前で実装する必要がある
• DOM及びSVGは要素を操作する（表示したい要素を動的に生成する）
  • 要素が増えれば増えるほどメモリを消費する
  • オブジェクトを生成するので座標等の状態管理を自前で実装する必要がない

---

各ファイルの説明

sample1 - arc.js

• 円を描画するだけ
• Canvas APIの作法の基礎

sample2 - move.js

• x,yの座標をフレーム毎に更新して描画した円を動かす

sample3 - bounce.js

• 円が上から落ちて来て画面下部でバウンドする
• 重力加速度と当たり判定

sample4 - chase.js

• マウスに追従するアニメーション
• 1フレームあたりの移動距離はマウスとパーティクルの距離に比例して大きくなる