1分タイマーの作り方2


時間の経過が見えるタイマーを作りました。
棒(バー)の長さが縮んでいくことで、時間経過を表現します。

 

 

以前、記事「1分タイマーの作り方」で、1分のカウントダウンタイマーをプログラミングしました。

また、記事「Canvasに長方形を描く2」で、長方形の描画と消去をプログラミングしました。

今回は、上記2つのプログラムを組み合わせることで、図形の変化で時間経過を表現するタイマーを作ります。

 

バーの長さが縮んでいくタイマー

  • タイマー部: 1分のカウントダウンタイマー
  • バー描画部: 長方形の描画・消去

 

(注)タイマー部やバー描画部の詳しい説明は、上記2つの記事をご参照ください。

 

1分タイマーのタイマー部

 

プログラム(タイマー部)

タイマーに関する行を、マーカー表示しました。

 

プログラム(タイマー部)の説明

グローバル変数は4個、関数は2個(Rectangle, function)です。

グローバル変数

  • timer_ID: タイマーを識別するID
  • time    : 経過時間を保存する変数
  • set_time: 設定時間、60秒で初期化
  • interval: 時間間隔、1秒(1000ミリ秒)で初期化

 

window.onload = function()

この関数に、オンロード直後に実行するプログラムを記述します。

 

43行で、タイマーを設定しています。

1秒間隔で、Rectangle()関数を呼び出します。

 

44行で、変数timeに値60を代入しています。

 

(注)setInterval関数の詳しい説明は、記事「1分タイマーの作り方」をご参照ください。

 

 

Rectangle()

26行で、変数timeから1引いています。

Rectangle()関数は、1秒に一回動きます。

すなわち、Rectangle()関数が動いたときは、前回動いたときより1秒経過しています。

 

28行から30行で、タイマーを消去しています。

変数timeの値が0ならば、タイマーを消去します。

 

 

1分タイマーのバー描画部

 

プログラム(バー描画部)

プログラムの内容は、プログラム(タイマー部)と同じです。

バーの描画に関する行を、マーカー表示しました。

 

プログラム(バー描画部)の説明

グローバル変数は4個、関数は2個(Rectangle, function)、要素は1個(canvas)です。

 

canvas要素

canvas-bar
Canvas要素: サイズは横幅300px、高さ50px

  • width: Canvasの横幅は300px
  • height: Canvasの高さは50px
  • id: “canvas”
  • style: “background-color:green”

 

グローバル変数

  • x: Canvasの始点[x座標](px)
  • y: Canvasの始点[y座標](px)
  • w: Canvasの横幅(px)
  • h: Canvasの高さ(px)
  • context: コンテキスト

 

 

window.onload = function()

37行で、canvasオブジェクトを生成しています。

38行で、そのcanvasオブジェクトの”2d”コンテキストを、変数contextに代入しています。

39行で、塗りつぶし色プロパティに、”orange”を代入しています。

41行で、Canvasと同じサイズ(300×50px)の長方形(色はorange)を描画しています。

 

Rectangle()

25行で、Canvas上の描画物を全て消去し、真っさらな状態にします。

 

27行で、変数timeの値から計算した長方形を描画します。

fillRectメソッドの第3引数は、描画する長方形の横幅です。

長方形の元の横幅wは、300(px)です。

また、変数set_timeの値は60です。

そのため、長方形の横幅w*(time/set_time)は、300*(time/60)となります。

 

変数timeの値により、長方形の横幅が以下のように縮みます。

  • timeが60: 300px
  • timeが30: 150px
  • timeが 0:    0px

 

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。