该实例根据慕课网视频制作

实现原理：利用HTML5的canvas，绘制出一个小球，然后根据数字的矩阵数组来排行小球，如数字0的矩阵数组：

[
 [0,0,1,1,1,0,0],
 [0,1,1,0,1,1,0],
 [1,1,0,0,0,1,1],
 [1,1,0,0,0,1,1],
 [1,1,0,0,0,1,1],
 [1,1,0,0,0,1,1],
 [1,1,0,0,0,1,1],
 [1,1,0,0,0,1,1],
 [0,1,1,0,1,1,0],
 [0,0,1,1,1,0,0]
],//0

根据数字0的矩阵数组，可以分别绘制出时间的时，分，秒 的小球数字；然后就是时间的变化，跟普通做时间计时效果一样，利用JS的setInterval函数：

setInterval(function(){
 render(context);
 update(); //具体实现参考源码
},50);

动画效果：首先看一个小球的运动效果：http://aweig.github.io/demo/canvas_time/ball.html

<canvas id="canvas" style="display:block; margin:50px auto;border:1px solid #000"></canvas>

 <script>
 //小球的x点，y点，r半径，g加速度，xv水平速度，yv垂直速度，color颜色
 var ball = {x:550, y:50, r:10, g:2, xv:-10, yv:-10, color:'red'};
 window.onload = function(){
 var canvas = document.getElementById('canvas');

 canvas.width=300 ;
 canvas.height = 300;

 var context = canvas.getContext('2d'); 

 setInterval(function(){
 render(context);
 update();
 },50);

 }

 function update(){
 ball.x += ball.xv;
 ball.y += ball.yv;
 ball.yv += ball.g;

 if(ball.y >= 300-ball.r){
 ball.y = 300-ball.r ;
 ball.yv = -ball.yv * 0.25;
 }

 }

 function render(cxt){
 cxt.clearRect(0, 0, canvas.width, canvas.height);
 cxt.beginPath();
 cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
 cxt.closePath();
 cxt.fillStyle = ball.color;
 cxt.fill();
 } 

 </script>

最后，根据时间值的变化产生出更多的效果

demo地址：

单个小球运动：http://aweig.github.io/demo/canvas_time/ball.html

完整demo：http://aweig.github.io/demo/canvas_time/index.html

源码地址：https://github.com/aweig/aweig.github.io/tree/master/demo/canvas_time