HTML5サンプル
- こんにちは世界
- 単純なCanvas
- マウスダウンでその位置に矩形を表示するCanvas
- マウスダウンでその位置に円を表示するCanvas
- 画像を表示するCanvas
- Canvasでバウンドするボール(アニメーション)
- ローカルストレージを使ったメモ
- 現在地の地図を表示(Google Maps API)
- 8パズル
- 15パズル
- 複数の画像を自動スクロール
CSS3サンプル
- 影とグラデーション
Canvasでバウンドするボール(アニメーション)
- Canvasでバウンドするボール(再掲)
- setInterval, beginPath, fillStyle, arc, fill, fillRectを利用
- 背景の再描画の領域を小さくする(ボールで隠れていたところだけ再描画)
- getImageData, putImageDataを利用
- ボールを生成する関数(クラスのようなもの)を定義して,複数のボールを生成できるようにする
- モジュールパターンを利用(Douglas Crockford, JavaScript: The Good Parts)
- ボールが重なったときに,ちらつかないようにする
- 背景の描画とボールの描画を分離して,全てのボールの背景を描画してから,全てのボールを描画する
- ボールに文字を書く
- font, textBaseline, textAlign, fillTextを利用
- ボールを回転させる
- save, restore, translate, rotateを利用
- ボールの中身(コンテンツ)の描画drawContentと,ボールのコンテナの描画を分ける.
- 回転,移動はコンテナの描画drawで行う
- ボールの中に画像を表示する
- save, restore, clipを利用
- newBallを継承してnewImageBallを定義(モジュールパターンを利用)
このページのいろいろな表現
リンク