HTML5サンプル

  1. こんにちは世界
  2. 単純なCanvas
  3. マウスダウンでその位置に矩形を表示するCanvas
  4. マウスダウンでその位置に円を表示するCanvas
  5. 画像を表示するCanvas
  6. Canvasでバウンドするボール（アニメーション）
  7. ローカルストレージを使ったメモ
  8. 現在地の地図を表示（Google Maps API）
  9. 8パズル
  10. 15パズル
  11. 複数の画像を自動スクロール

CSS3サンプル

  1. 影とグラデーション

Canvasでバウンドするボール（アニメーション）

  1. Canvasでバウンドするボール（再掲）
    • setInterval, beginPath, fillStyle, arc, fill, fillRectを利用
  2. 背景の再描画の領域を小さくする（ボールで隠れていたところだけ再描画）
    • getImageData, putImageDataを利用
  3. ボールを生成する関数（クラスのようなもの）を定義して，複数のボールを生成できるようにする
    • モジュールパターンを利用(Douglas Crockford, JavaScript: The Good Parts)
  4. ボールが重なったときに，ちらつかないようにする
    • 背景の描画とボールの描画を分離して，全てのボールの背景を描画してから，全てのボールを描画する
  5. ボールに文字を書く
    • font, textBaseline, textAlign, fillTextを利用
  6. ボールを回転させる
    • save, restore, translate, rotateを利用
    • ボールの中身（コンテンツ）の描画drawContentと，ボールのコンテナの描画を分ける．
    • 回転，移動はコンテナの描画drawで行う
  7. ボールの中に画像を表示する
    • save, restore, clipを利用
    • newBallを継承してnewImageBallを定義（モジュールパターンを利用）

このページのいろいろな表現

リンク