HTML5 アニメーション
ピクセル絵のアニメーションサンプルです。（円もピクセル打ちで描いています）
ソースはこれ（HTMLをHTMLに表示するのって面倒なんですね。拡張子がtxtなのでhtmlに直すかしてください）
処理の要点は以下のとおりです。
①
bodyタグにHTML5のcanvasタグを追加する
<body>
<canvas id="canvas4physics" width="400" height="300"></canvas>
</body>
②各種描画オブジェクトを変数に取り込んで、更新するビット絵を作成する(以下全てscriptタグ内)
var canvas = document.getElementById(_cname); //キャンバス _cnameはcanvasタグのidを指定
var cctx = canvas.getContext(_ccid); //キャンバスコンテキスト _ccidは"2d"と決まっている
var imgWidth = canvas.width;//イメージの幅
var imgHeight = canvas.height;//イメージの高さ
var bufImg = cctx.getImageData(0, 0, imgWidth, imgHeight);//表示するイメージデータです。createImageDataでもよい。
var bdata = bufImg.data;//実際に操作するピクセルデータはdataメソッドでrgbaの配列（詳細は後述）として取り出す。
③アニメーション用タイマーを作成する
clearInterval(timerID);
timerID = setInterval("oneturn()", 30);//30ミリ秒毎にoneturn関数をコール
oneturn関数では、物体の位置更新とcanvasの再描画をします。
④タイマーが呼ばれるたびにアニメーション情報（円の位置）を更新する
WorldクラスのupdateWorldメソッドでやっている
for (var i = 0; i < this.bodys.length; i++)//Worldクラスに属している全てのオブジェクトに対し、
rbe.posx = rbe.posx + rbe.vx * _pasttime/1000;//位置を更新
⑤タイマーが呼ばれる度にビット絵を更新する
簡潔にいうとbdataの配列を更新するだけ。
bdata（イメージピクセル配列）の構造は１ピクセル4バイト。RGBAで構成。（Aはアルファ値分からん人は255でOK）
bdata[0]は左上１ピクセル目のR値
bdata[1]は左上１ピクセル目のG値
bdata[3]は左上１ピクセルのアルファ値
bdata[(imgWidth*17 + 5) * 4 + 1]は上からの18行目左から6番目のG値
⑥作成したビット絵をキャンバスに書き出す
ここがアニメーションの肝
キャンバスに一気に書き出されるのでちらつきもない（ダブルバッファリングのフリッピングだろうね。）
cctx.putImageData(bufImg, 0, 0);
手順は以上
ビットマップを取り込んでアニメーションさせる話もあるかと思うが、今のところ興味なしです。
戻る