Canvas How to - Create Digit clock animation

Question

We would like to know how to create Digit clock animation.

Answer


<!--   w w  w .  ja  v a 2 s .c o m-->



<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||  
        window.webkitRequestAnimationFrame ||  
        window.mozRequestAnimationFrame    ||  
        window.oRequestAnimationFrame      ||  
        window.msRequestAnimationFrame     ||  
    function(callback){window.setTimeout(callback, 20000)}; 
  })(); 
var cvs = document.getElementById("canvasId"),
  c = cvs.getContext("2d"),
    t = 0,
    i = 0;
function loop(){
  window.requestAnimFrame(loop);
    i++;
    if (i==10) {
      i = 0;
      t++;
    }
    c.clearRect(0,0,cvs.width,cvs.height);
    c.font = "bold 90px Arial";
    c.fillText(i + " " + t, 100, 200);
};
loop();
}//]]>  
</script>
</head>
<body>
  <canvas id="canvasId" width="800" height="600"></canvas>
</body>
</html>

The code above is rendered as follows: