１分タイマーの作り方２

2016-12-06 管理者

Contents

1 １分タイマーのタイマー部
2 １分タイマーのバー描画部
- 2.1 共有:

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

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

また、記事「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>

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上の描画物を全て消去し、真っさらな状態にします。

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

１分タイマーのタイマー部

プログラム（タイマー部）

プログラム（タイマー部）の説明

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

プログラム（バー描画部）

プログラム（バー描画部）の説明

共有:

こちらもおすすめ

水準器アプリの試作1

OSS-DB Silver 暗記 C-1-3

Laravelで、Excelファイルを作成し、ダウンロードする方法（テンプレート使用）

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル