円形(円弧?)の進捗率を表すメーター(グラフ?)をHTML5で

2016.05.13

ちょっとしたプログラムを依頼されたんですが、その中に進捗を表す円のメーターをつけて欲しいと要望がありました。

(50%とか20%とか文字でええやんとか思ってはいけない)

sample

こんな感じのやつです。

CSSとかでは難しかったので、Javascript、Canvasで対応しました↓

まず、一つ円を描画して、その後太い円を開始位置から、終了位置まで時計回りで描画するようにしてます。

ソースはこちら。

こちらのページを参考にしました

次の記事: speedifyを使ってnetflixの動画を見た件

http://speedify.com/   speedifyで日本のhuluは見れないようだ OCN 70MB/dayとぷららの無制限SIMをspeedifyでまとめてみ...続きを読む

前の記事: Macの容量不足を解決。SDカードと内蔵SSDの合体技「Fusion Drive化」

私のMacBookPro(Mid 2014)はストレージ容量が128GBですが、仕事で使うために開発ツールなど様々インストールしていて、容量不足でした。 USBメモリやSDカードを取り付けてデー...続きを読む