Canvas How to - Enlarge arc in animation

Question

We would like to know how to enlarge arc in animation.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){<!--  ww w. ja  v a 2  s  .  co m-->
function animate() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.save();
    ctx.clearRect(0, 0, c.width, c.height);

    var cx = c.width / 2;
    var cy = c.height / 2;
    var r = Math.min(cx, cy);
    ctx.beginPath();
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    if (i > 180) {
        i = 1;
    }
    if (i > 40) {
        ctx.beginPath();
        ctx.arc(50, 50, i - 40, 0, 2 * Math.PI, true);
        ctx.fillStyle = "#FF0033";
        ctx.fill();
    }
    i++;
    ctx.restore();
    setTimeout(animate, 10);
}
var i = 0;
animate();
}//]]>  
</script>
</head>
<body>
  <canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>

The code above is rendered as follows: