Lesson11: タイマー

このサイトは移転しました。5秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

---

一定間隔で何かを行いたい、そんなときに使えるのがタイマーです。
JavaScriptを使ってアニメーションを行う場合などによく利用されます。

タイマーを実現する関数として、指定間隔で繰り返し呼ばれるsetInterval()関数と、指定時間経過後に一度だけ呼ばれるsetTimeout()関数の2つがあります。
また、設定したタイマーを解除するために、clearInterval()関数、clearTimeout()関数がそれぞれ用意されています。
それでは、以下をテキストエディタ等で入力してください。はじめは内容がよく分からなくても、実際に打ち込んでいくなかで、次第に分かるようになってきます。

リスト11: lesson11.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson11</title>
  </head>
  <body>
    <canvas id="myCanvas" width="300px" height="300px"></canvas>
    <script>
        var repeat   = 100;
        var counter  = 0;
        var interval = 50;
        var timerId;

        function draw() {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var width  = canvas.width;
            var height = canvas.height;
            var r = Math.min(width, height) / 2 * counter / repeat;

            // Clear canvas
            context.clearRect(0, 0, width, height);

            // Draw circle
            context.beginPath();
            context.arc(width / 2, height / 2, r, 0, Math.PI * 2, true);
            context.fillStyle = "skyblue";
            context.fill();

            // Increase counter
            counter++;
            if (counter > repeat) {
                clearInterval(timerId);
            }
        }

        window.onload = function() {
            timerId = setInterval(draw, interval);
        };
    </script>
  </body>
</html>

保存したファイルをWebブラウザで開くと、50ミリ秒単位で100コマからなる簡単なアニメーションが実行されますす。


【解説】
setInterva()関数lの書式は以下の通りです。
　setInterval(処理, 実行間隔[ms])
処理には定義した関数名を指定するか、または引用句で括って、実行したい内容を記述してください。上記の例では、第一引数の draw となっている箇所は、"draw()"でも構いません。