Canvasを使ってアニメーション

Canvasを使って作ったアニメーションです。ちょっとキモイ。

見てみる。

仕組み

• タイマーを仕込んで定期的にキャンバスを更新。
• 更新ごとにキャンバスはクリアして、1から再描画しています。(座標を変えて画像を張るだけだけど。)
• フレームレートは24枚/sec。確認した環境では、こま落ちはしてなさそうです。
• IEでも動作します。ExplorerCanvasを使用。

はまりみち : 画像の描画で座標の指定は必須

はまったところ。最初、画像を描画する座標を指定せず、「ctx.drawImage( imgs[frame%2] );」としていてはまりました。(勝手に[0,0]に描画されると思い込んでいました。)未指定の場合、次の例外がスローされます(Firefox2で確認。)。

uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: http://xxx/070923/ :: draw :: line 20" data: no]」