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();
}
}