ブログでHTML5 Canvas アニメーション

window.requestAnimationFrame()メソッド

今回はアニメーションをします。
ただし、今回使うwindow.requestAnimationFrame()メソッドは、ブラウザによってはサポートされていないので注意して下さい。
ここでは、Chromeで動作確認しました。

<canvas id="drawAnimatedRectCanvas" width="300" height="300"></canvas>
<script>
    (function ()
    {
        var canvas = document.getElementById("drawAnimatedRectCanvas");
        var context = canvas.getContext("2d");
        var time = 0;

        function drawFrame()
        {
            window.requestAnimationFrame(drawFrame);
            context.clearRect(0, 0, canvas.width, canvas.height);
            time += 1.0 / 60;
            context.fillRect(0, 100 * (1 + Math.sin(time)), 100, 100);
        }

        drawFrame();
    })();
</script>

ここで使ったのは、

window.requestAnimationFrame(drawFrame);

です。
このメソッドはアニメーションを行なってくれます。
drawFrameには次に行う描画のメソッドを指定します。
そうすると、このメソッドはdrawFrameを呼び出してくれ、アニメーションになるのです。

---

window.setInterval()メソッド
アニメーションにはこんな方法を使うこともできます。
むしろこちらのほうがわかりやすいという人もいると思います（私がそうです）。
ただしこの方式には欠点もあるので気をつけましょう。

<canvas id="drawSetIntervalDemoCanvas" width="300" height="300"></canvas>
<script>
    (function () {
        var canvas = document.getElementById("drawSetIntervalDemoCanvas");
        var context = canvas.getContext("2d");
        var time = 0;
        var dTime = 1.0 / 60;

        window.setInterval(
            function () {
                context.clearRect(0, 0, canvas.width, canvas.height);
                time += dTime;
                context.fillRect(0, 100 * (1 + Math.sin(time)), 100, 100);
            },
            dTime * 1000
            );
    })();
</script>

window.setInterval(expression, milliseconds, language);メソッドは引数の関数を指定した間隔で呼び続けます。
絵をすこしずつ変えて描くメソッドを引数にすれば、アニメーションが描けるというわけですね。
expressionは指定した時間が立った時に呼び出される関数です。
millisecondsは時間間隔です。（単位はミリセカンド、1/1000秒です）
languageは省略可能です。LANGUAGE属性に指定可能な文字列です。"JScript"や"JavaScript"などですね。