canvas：制作一个很炫的倒计时

1、目的：

    很多网站都会用到倒计时，如：天猫等。本文讲述的是一个用canvas实现的绚丽的倒计时。

2、原理：

    canvas标签类似于html的其他标签，<canvas></canvas>,canvas就相当于一张画布，可以在上面绘制各种自己想要的效果。

    数字的点阵实现，利用0和1，0标示不填充，1表示用绿色小球填充。

        
     
      	    当前浏览器不支持canvas	
     

3、代码：

    digit.js放的是所有数字的点阵二维数组。

digit=[	[		[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,0,0,1,1,0,0],		[0,1,1,1,1,0,0],		[0,0,0,1,1,0,0],		[0,0,0,1,1,0,0],		[0,0,0,1,1,0,0],		[0,0,0,1,1,0,0],		[0,0,0,1,1,0,0],		[0,0,0,1,1,0,0],		[0,0,0,1,1,0,0],		[1,1,1,1,1,1,1],	],// 1	[		[0,1,1,1,1,1,0],		[1,1,0,0,0,1,1],		[0,0,0,0,0,1,1],		[0,0,0,0,1,1,0],		[0,0,0,1,1,0,0],		[0,0,1,1,0,0,0],		[0,1,1,0,0,0,0],		[1,1,0,0,0,0,0],		[1,1,0,0,0,0,1],		[1,1,1,1,1,1,1],	],// 2	[		[1,1,1,1,1,1,1],		[0,0,0,0,0,1,1],		[0,0,0,0,1,1,0],		[0,0,0,1,1,0,0],		[0,0,1,1,1,0,0],		[0,0,0,0,1,1,0],		[0,0,0,0,0,1,1],		[0,0,0,0,0,1,1],		[1,1,0,0,0,1,1],		[0,1,1,1,1,1,0],	],// 3	[		[0,0,0,0,1,1,0],		[0,0,0,1,1,1,0],		[0,0,1,1,1,1,0],		[0,1,1,0,1,1,0],		[1,1,0,0,1,1,0],		[1,1,1,1,1,1,1],		[0,0,0,0,1,1,0],		[0,0,0,0,1,1,0],		[0,0,0,0,1,1,0],		[0,0,0,1,1,1,1],	],// 4	[		[1,1,1,1,1,1,1],		[1,1,0,0,0,0,0],		[1,1,0,0,0,0,0],		[1,1,1,1,1,1,0],		[0,0,0,0,0,1,1],		[0,0,0,0,0,1,1],		[0,0,0,0,0,1,1],		[0,0,0,0,0,1,1],		[1,1,0,0,0,1,1],		[0,1,1,1,1,1,0],	],// 5	[		[0,0,0,0,1,1,0],		[0,0,0,1,1,0,0],		[0,0,1,1,0,0,0],		[0,1,1,0,0,0,0],		[1,1,0,0,0,0,0],		[1,1,0,1,1,1,0],		[1,1,1,0,0,1,1],		[1,1,0,0,0,1,1],		[1,1,0,0,0,1,1],		[0,1,1,1,1,1,0],	],// 6	[		[1,1,1,1,1,1,1],		[0,0,0,0,0,1,1],		[0,0,0,0,1,1,0],		[0,0,0,0,1,1,0],		[0,0,0,1,1,0,0],		[0,0,0,1,1,0,0],		[0,0,1,1,0,0,0],		[0,0,1,1,0,0,0],		[0,0,1,1,0,0,0],		[0,0,1,1,0,0,0],	],// 7	[		[0,1,1,1,1,1,0],		[1,1,0,0,0,1,1],		[1,1,0,0,0,1,1],		[1,1,0,0,0,1,1],		[0,1,1,1,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],		[0,1,1,1,1,1,0],	],// 8	[		[0,1,1,1,1,1,0],		[1,1,0,0,0,1,1],		[1,1,0,0,0,1,1],		[1,1,0,0,1,1,1],		[0,1,1,1,0,1,1],		[0,0,0,0,0,1,1],		[0,0,0,0,1,1,0],		[0,0,0,1,1,0,0],		[0,0,1,1,0,0,0],		[0,1,1,0,0,0,0],	],// 9	[		[0,0,0,0],		[0,0,0,0],		[0,1,1,0,],		[0,1,1,0],		[0,0,0,0],		[0,0,0,0],		[0,1,1,0],		[0,1,1,0],		[0,0,0,0],		[0,0,0,0,],	],// :];

countdown.js是核心js代码，在这里他将实现的功能是实现倒计时，利用点阵实现绚丽效果：

var RADIUS = 4;var MARGIN_LEFT = 60;var MARGIN_TOP = 30;var endTime = new Date(2014,7,24,11,0,0);var curShowTimeSeconds = 0;var balls = [];var colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444"];window.οnlοad=function(){	var canvas = document.getElementById("canvas");	var context = canvas.getContext("2d");	curShowTimeSeconds = getCurShowTImeSeconds();		setInterval(function(){		render(context);		update();	},50);}function update(){	var nextShowTimeSeconds = getCurShowTImeSeconds();	var nextHours = parseInt(nextShowTimeSeconds/3600);	var nextMinutes = parseInt((nextShowTimeSeconds-nextHours*3600)/60);	var nextSeconds = parseInt(nextShowTimeSeconds%60);		var curHours = parseInt(curShowTimeSeconds/3600);	var curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60);	var curSeconds = parseInt(curShowTimeSeconds%60);	if(nextSeconds!=curSeconds){		if(parseInt(curHours/10)!=parseInt(nextHours/10)){			addBalls(MARGIN_LEFT,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();}function updateBalls(){	for(var i=0;i
     
      600-balls[i].r){// 屏幕的底部			balls[i].y=600-balls[i].r;			balls[i].vy = -balls[i].vy*0.6;		}else{			balls[i].vy+=balls[i].g;		}	}}function addBalls(x,y,num){	for(var i=0;i
      
       0?ret:0;}function render(ctx){	ctx.clearRect(0,0,1200,600);	var hours = parseInt(curShowTimeSeconds/3600);	var minutes = parseInt((curShowTimeSeconds%3600)/60);	var seconds = parseInt(curShowTimeSeconds%60);		renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),ctx);	renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),ctx);	renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);	renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx);	renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx);	renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx);	renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx);	renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx);		for(var i=0;i
      
     

4、效果图：