ローディングアイコンを画像の代わりに canvas でアニメーション描画

html5 javascript

アニメ GIF だと、背景色に合わせて透過画像を作らないといけないので、canvas でアニメーションしてみました。

ソースはこちら
http://gist.github.com/380581

loading = new LoadingIcon('rgb') したのちに、
loading.start() すると setInterval() でアニメーションを開始しますので、
loading.element で HTMLCanvasElement オブジェクトが取れますので、appendChild() に渡すなり、jQuery の appendTo() なりに渡せば描画されます。

raw を html として保存すれば動作サンプルが見られます。

Chrome 5, FireFox 3.6, Safari 4.0 で動作を確認しました。

描画領域が小さく、strokeRect() だと綺麗にバーが描画できなかったので、arc() を二つ重ねて描画しています。