HTML5 canvas画布写炫彩动态的倒计时效果

html代码如下，插入了2个js代码。

 <!DOCTYPE html>
 <html>
 <head>
     <title>canvas</title>
 </head>
 <body>
     <canvas id="canvas" style="border-bottom:1px solid #1E90FF;margin:50px auto;display:block;" ></canvas>

 </body>
 <script type="text/javascript" src="digit.js"></script>
 <script type="text/javascript" src="countdown.js"></script>
 <script type="text/javascript">
 </script>
 </html>

digit.js文件是，将数字用0，1表示的一个3维数组。

countdown.js文件是核心js文件，利用canvas画出时间图像和小球。

 /*
 ************************
 * powered by Ming
 * 2014-9-23
 ***********************
 */
 var CANVAS_WIDTH = 700;//画布宽度
 var CANVAS_HEIGHT = 450;
 var RADIUS = 5;//画布的中，圆点的半径

 var MARGIN_TOP = 60;
 var MARGIN_LEFT = 30;

 const endTime = new Date(2014,8,25,18,17,52);
 var curShowTimeSeconds = 0;

 var balls = [];
 const colors = ["#00FFFF","#A52A2A","#7FFF00","#DC143C","#00FFFF","#FF00FF","#FFD700","#4B0082"];

 window.onload = function(){
     var canvas = document.getElementById("canvas");
     var context = canvas.getContext("2d");

     canvas.width = CANVAS_WIDTH;
     canvas.height = CANVAS_HEIGHT;

     curShowTimeSeconds = getCurrentShowTimeSeconds();

     setInterval( function(){
         render( context );
         update();

     },50 );
 }

 function getCurrentShowTimeSeconds(){

     var curTime = new Date();
     var ret = endTime.getTime() - curTime.getTime();
     ret = Math.round( ret/1000 );
     return ret >= 0 ?ret : 0;
 }

 function update(){
     var nextShowTimeSeconds = getCurrentShowTimeSeconds();

     var nextHours = parseInt( nextShowTimeSeconds/3600 );
     var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours*3600)/60 );
     var nextSeconds = nextShowTimeSeconds%60 ;

     var curHours = parseInt( curShowTimeSeconds/3600 );
     var curMinutes = parseInt( (curShowTimeSeconds - curHours*3600)/60 );
     var curSeconds = curShowTimeSeconds%60;

     //判断当时间改变时，产生小球
     if( nextSeconds != curSeconds ){
         //判断小时的2位数字是否变化
         if( parseInt(curHours/10) != parseInt(nextHours/10) )
             addBalls( MARGIN_LEFT+0, MARGIN_TOP, parseInt(curHours/10) );
         if( parseInt(curHours%10) != parseInt(nextHours%10) )
             addBalls( MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(curHours%10) );
         //判断分钟
         if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) )
             addBalls( MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10) );
         if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) )
             addBalls( MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10) );
         //判断秒钟
         if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) )
             addBalls( MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10) );
         if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) )
             addBalls( MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10) );

         curShowTimeSeconds = nextShowTimeSeconds;
     }

     updateBalls();
     console.log( balls.length );
 }

 function updateBalls(){

     for( var i=0; i< balls.length;i++ ){

         balls[i].x += balls[i].vx;
         balls[i].y += balls[i].vy;
         balls[i].vy += balls[i].g

         if( balls[i].y >= CANVAS_HEIGHT - RADIUS ){
             balls[i].y = CANVAS_HEIGHT - RADIUS;
             balls[i].vy = - balls[i].vy*0.7;//设置摩擦因素
         }
     }

     //清除多余的小球，不在边框内的 ，优化性能
     var cnt = 0;
     for ( var i= 0;i< balls.length; i++ )
         if( balls[i].x + RADIUS >0 && balls[i].x - RADIUS < CANVAS_WIDTH )
             balls[cnt++] = balls[i];

         while( balls.length > Math.min(700,cnt) )
             balls.pop();

 }

 function addBalls( x,y,num ){

     for( var i = 0;i< digit[num].length ;i++ )
         for( var j = 0; j< digit[num][i].length; j++ )
             if( digit[num][i][j] == 1 ){

                 var aBall = {
                     x: x+ j*2*(RADIUS+1)+(RADIUS+1),
                     y: y+ i*2*(RADIUS+1)+(RADIUS+1),
                     g: 1.5+Math.random(),
                     vx:Math.pow( -1, Math.ceil( Math.random()*1000 )*11 ),
                     vy:-5,
                     color:colors[ Math.floor( Math.random()*colors.length ) ]
                 };

                 balls.push( aBall );

             }

 }

 function render( cxt ){

     cxt.clearRect( 0,0,CANVAS_WIDTH,CANVAS_HEIGHT );//刷新画布

     //获取当前时间值
     var hours = parseInt( curShowTimeSeconds/3600 );
     var minutes = parseInt( (curShowTimeSeconds - hours*3600)/60 );
     var seconds = parseInt( curShowTimeSeconds%60 );

     //parseInt() 解析一个字符串，并返回一个整数
     //在画布中，每个数字是由7个小方格组成的，故有7个半径为14，增加一点距离则为15，
     //而冒号是由4个组成，故为4个为8+1=9的距离间隔
     renderDigit( MARGIN_LEFT + 0, MARGIN_TOP, parseInt(hours/10),cxt );
     renderDigit( MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10),cxt );
     renderDigit( MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP, 10,cxt );//添加冒号，在digit中冒号是第10个
     renderDigit( MARGIN_LEFT + 39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10),cxt );
     renderDigit( MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10),cxt );
     renderDigit( MARGIN_LEFT + 69*(RADIUS+1), MARGIN_TOP, 10,cxt );//添加冒号，在digit中冒号是第10个
     renderDigit( MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10),cxt );
     renderDigit( MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10),cxt );

     //给小球画颜色
     for( var i = 0;i< balls.length;i++ ){
         cxt.fillStyle = balls[i].color;

         cxt.beginPath();
         cxt.arc( balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true );
         cxt.closePath();

         cxt.fill();
     }

 }

 function renderDigit( x,y,num,cxt ){

     cxt.fillStyle = "#1E90FF";

     for( var i = 0;i< digit[num].length ;i++ )
         for( var j = 0; j< digit[num][i].length; j++ )
             if( digit[num][i][j] == 1 ){
                 cxt.beginPath();
                 cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) ,y+ i*2*(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI );
                 cxt.closePath();

                 cxt.fill();
             }
 }