ロード中のぐるぐるするやつの巻 ver.1.2.0

こういうのよく見かけますよね。ロード中にぐるぐる回るやつです。なんて呼んだらいいか知らないので勝手に「Spinning Clock」 と名付けます。

widgetに使いたいけどこれを自分で作ろうとすると結構面倒くさい。画像でやる場合、作ったは良いがサイズ変えたい、色を変えたいとなると作り直さなきゃならない。
これをJavascriptとCanvasを使って描くようにすれば面倒な作業をせずに済むわけです。簡単なので作ってみました。

1) IDとwidthとheightを指定した正方形のCanvas要素。
2) 謹製SpinningClock.js


まずCanvasを用意します。Canvasは正方形にしてね。例えばこんな感じに。



でもってSpinningClock.jsはこちらです。

Javascript側の使い方ですが、最初にSpinningClockを作成します。



canvasIDにはCanvas要素IDを、startColorは上のSpinningClockでいうと一番濃い色の12時のポジションの線の色。canvasなのでhexでもrgbでも良いです。 ここから反時計回りにglobalAlphaを使って疑似グラデーションさせています。
roundCapはBooleanで、trueなら線の両端に半円がつきます。指定するのは基本的にはこれだけで、サイズや線の太さはcanvasのサイズから自動的に調節されるので楽チン。 上のSpinningClockは、



という感じになってます。

動かす時は、

止める時は、

とまあこれだけです。では実際に動かしてみましょう。サイズは40x40、色は#333333、roundCapはtrue。ボタンを押すと回ります。



サイズですが、最小は11x11です。すぐ下のやつは11x11です。これより小さく指定すると小さ過ぎてよくわからなくなってしまいます。 Safariのタブに表示されるやつのサイズは15x15くらいだと思います。


基本的にwidgetで使うために作った物なので、デフォルトではstart()をコールするまで描かれません。それと、stop()をコールすると Spinning Clockを消去し、startColorの位置もリセットします。

startせずに描きたい場合は、とすればいいです。
stopした時に消去したくない場合は、と動かす前に指定すればOKです。

以下は色を変えたやつ(startColor=#0000FF)です。暗い背景だとどう見えるかわかると思います。roundCapはfalse。今度は前述のようにstartしたら描き始め、stopで消えます。



ver.1.2.0 - 一色だけ指定すればいいようにした。もっと簡単になりました。