１分タイマーの作り方２
時間の経過が見えるタイマーを作りました。
棒（バー）の長さが縮んでいくことで、時間経過を表現します。
以前、記事「１分タイマーの作り方」で、１分のカウントダウンタイマーをプログラミングしました。
また、記事「Canvasに長方形を描く２」で、長方形の描画と消去をプログラミングしました。
今回は、上記２つのプログラムを組み合わせることで、図形の変化で時間経過を表現するタイマーを作ります。
バーの長さが縮んでいくタイマー
- タイマー部： １分のカウントダウンタイマー
- バー描画部： 長方形の描画・消去
（注）タイマー部やバー描画部の詳しい説明は、上記２つの記事をご参照ください。
１分タイマーのタイマー部
プログラム（タイマー部）
タイマーに関する行を、マーカー表示しました。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>One Minute Bar Timer</title>
<script type="text/javascript">
//
// グローバル変数
//
// タイマー関連
var timer_ID; // タイマーID
var time; //
var set_time = 60; // 設定時間： 60(秒) = 1(分)
var interval = 1000; // 時間間隔： 1000(ミリ秒) = 1(秒)
// Canvas関連
var x = 0; // Canvasの始点[x座標]（pixel）
var y = 0; // Canvasの始点[y座標]（pixel）
var w = 300; // Canvasの横幅（pixel）
var h = 50; // Canvasの高さ（pixel）
var context; //
//
// 長方形の更新、timeの更新
//
function Rectangle() {
context.clearRect(x, y, w, h);
time--;
context.fillRect(x, y, w*(time/set_time), h);
if (time==0) {
clearInterval(timer_ID);
}
}
//
// 長方形の描画準備、長方形の描画、タイマーの設定
//
window.onload = function() {
//
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.fillStyle = "orange";
//
context.fillRect(x, y, w, h);
//
timer_ID = setInterval("Rectangle()", interval);
time = set_time;
}
</script>
</head>
<body>
<canvas width="300" height="50" id="canvas" style="background-color:green;"></canvas>
</body>
</html>
プログラム（タイマー部）の説明
グローバル変数は４個、関数は２個（Rectangle, function）です。
グローバル変数
- timer_ID： タイマーを識別するＩＤ
- time ： 経過時間を保存する変数
- set_time： 設定時間、60秒で初期化
- interval： 時間間隔、1秒（1000ミリ秒）で初期化
window.onload = function()
この関数に、オンロード直後に実行するプログラムを記述します。
43行で、タイマーを設定しています。
timer_ID = setInterval("Rectangle()", interval);
1秒間隔で、Rectangle()関数を呼び出します。
44行で、変数timeに値60を代入しています。
time = set_time;
（注）setInterval関数の詳しい説明は、記事「１分タイマーの作り方」をご参照ください。
Rectangle()
26行で、変数timeから1引いています。
time--;
Rectangle()関数は、1秒に一回動きます。
すなわち、Rectangle()関数が動いたときは、前回動いたときより1秒経過しています。
28行から30行で、タイマーを消去しています。
if (time==0) {
clearInterval(timer_ID);
}
変数timeの値が0ならば、タイマーを消去します。
１分タイマーのバー描画部
プログラム（バー描画部）
プログラムの内容は、プログラム（タイマー部）と同じです。
バーの描画に関する行を、マーカー表示しました。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>One Minute Bar Timer</title>
<script type="text/javascript">
//
// グローバル変数
//
// タイマー関連
var timer_ID; // タイマーID
var time; //
var set_time = 60; // 設定時間： 60(秒) = 1(分)
var interval = 1000; // 時間間隔： 1000(ミリ秒) = 1(秒)
// Canvas関連
var x = 0; // Canvasの始点[x座標]（pixel）
var y = 0; // Canvasの始点[y座標]（pixel）
var w = 300; // Canvasの横幅（pixel）
var h = 50; // Canvasの高さ（pixel）
var context; //
//
// 長方形の更新、timeの更新
//
function Rectangle() {
context.clearRect(x, y, w, h);
time--;
context.fillRect(x, y, w*(time/set_time), h);
if (time==0) {
clearInterval(timer_ID);
}
}
//
// 長方形の描画準備、長方形の描画、タイマーの設定
//
window.onload = function() {
//
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.fillStyle = "orange";
//
context.fillRect(x, y, w, h);
//
timer_ID = setInterval("Rectangle()", interval);
time = set_time;
}
</script>
</head>
<body>
<canvas width="300" height="50" id="canvas" style="background-color:green;"></canvas>
</body>
</html>
プログラム（バー描画部）の説明
グローバル変数は４個、関数は２個（Rectangle, function）、要素は１個（canvas）です。
canvas要素
<canvas width="300" height="50" id="canvas" style="background-color:green;"></canvas>
- 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上の描画物を全て消去し、真っさらな状態にします。
context.clearRect(x, y, w, h);
27行で、変数timeの値から計算した長方形を描画します。
context.fillRect(x, y, w*(time/set_time), h);
fillRectメソッドの第3引数は、描画する長方形の横幅です。
w*(time/set_time)
長方形の元の横幅wは、300（px）です。
また、変数set_timeの値は60です。
そのため、長方形の横幅w*(time/set_time)は、300*(time/60)となります。
変数timeの値により、長方形の横幅が以下のように縮みます。
- timeが60： 300px
- timeが30： 150px
- timeが 0： 0px
