Canvas How to - Draw Spiral animation

Question

We would like to know how to draw Spiral animation.

Answer


<!--   w w w  .j ava 2 s . co  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    function DrawSpiral(mod) {
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        var centerX = 150;
        var centerY = 150;
        cxt.save();
        cxt.clearRect(0, 0, c.width, c.height);
        cxt.beginPath();
        cxt.moveTo(centerX, centerY);
        var STEPS_PER_ROTATION = 60;
        var increment = 2 * Math.PI / STEPS_PER_ROTATION;
        var theta = increment;
        while (theta < 40 * Math.PI) {
            var newX = centerX + theta * Math.cos(theta - mod);
            var newY = centerY + theta * Math.sin(theta - mod);
            cxt.lineTo(newX, newY);
            theta = theta + increment;
        }
        cxt.stroke();
        cxt.restore();
    }
    var counter = 0;
    setInterval(function () {
        DrawSpiral(counter);
        counter += 0.075;
    }, 10);
}//]]>  
</script>
</head>
<body>
  <canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>

The code above is rendered as follows: