Editor

Pregled code-a:

<html>
<head>
    <title>Hello world Animation!</title>
    <script type="text/javascript">
        var can, ctx, addAngle, addScale,
            step, steps = 50, delay = 20;
 
        function init() {
            can = document.getElementById("can");
            ctx = can.getContext("2d");
            addAngle = Math.PI * 2 / steps;
            addScale = 1 / steps;
            step = 0;
            ctx.fillStyle = "blue";
            ctx.font = "48pt Helvetica";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            spinText();
        }
 
        function spinText() {
            step++;
            ctx.clearRect(0,0, can.width, can.height);
            ctx.save();
            ctx.translate(can.width / 2, can.height / 2);
            ctx.scale(addScale * step, addScale * step);
            ctx.rotate(addAngle * step);
            ctx.fillText("Hello, world!", 0, 0);
            ctx.restore();
            if (step < steps)
                var t = setTimeout('spinText()', delay);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="can" height="200" width="400">
    </canvas>
</body>
</html>

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/33textanimation.html.