canvas上でアニメーションする

canvas上でアニメーションをさせるには、javascriptで繰り返し描画を行います。


マウスを乗せると描画します。

---

---

---

<canvas id="drawAnimationOnCanvas1Canvas" style="border: 1px solid;" onmouseover="drawAnimationOnCanvas1();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawAnimationOnCanvas1() {
    var c = document.getElementById("drawAnimationOnCanvas1Canvas");
    var context = c.getContext("2d");
    var width = c.width;
    var height = c.height;
    var cx = 150;
    var cy = 150;
    var r = 150;
    var d = 0;
    var fontSize = 1;
    var fontAdd = 0.02;
    setInterval(fire, 50);
    function fire() {
        context.clearRect(0, 0, c.width, c.height);
        context.fillStyle = "#FFFFFF";
        context.fillRect(0, 0, c.width, c.height);
        var x = Math.cos(d * 360) * r + cx;
        var y = Math.sin(d * 360) * r / 2 + cy;
        context.fillStyle = "#000000";
        context.font = fontSize + "em 'Georgia'";
        context.fillText("This is not a Flash", x, y);
        d += 0.07;
        fontSize += fontAdd;
        if (3 < fontSize) fontAdd = -0.02;
        if (fontSize <= 0.25) fontAdd = 0.02;
    }
}
</script>

---