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

1、目的:

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

2原理

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

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

    wKioL1P5O4bQwqyHAADTvYLaTG4868.jpg

    

        <canvas id="canvas" width="1200" height="600">
	    当前浏览器不支持canvas
	</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.onload=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<balls.length;i++){
		balls[i].x+=balls[i].vx;
		balls[i].y+=balls[i].vy;
		
	//	alert(balls[i].y);
		if(balls[i].y>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<digit[num].length;i++){
		for(var j=0;j<digit[num][j].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),
					r:RADIUS,
					g:1.5+Math.random(),
					vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,
					vy:-5,
					color:colors[Math.floor(Math.random()*colors.length)]
				}
				balls.push(aBall);
			}
		}
	}
}

function getCurShowTImeSeconds(){
	var curTime = new Date();
	var ret = endTime.getTime()-curTime.getTime();
	ret = Math.round(ret/1000);
	return ret>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<balls.length;i++){
		ctx.fillStyle=balls[i].color;
		ctx.beginPath();
		ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI);
		ctx.closePath();
		ctx.fill();
	}
}

function renderDigit(x,y,num,ctx){
	ctx.fillStyle="blue";
	for(var i=0;i<digit[num].length;i++){
		for(var j=0;j<digit[num][j].length;j++){
			if(digit[num][i][j]==1){
				ctx.beginPath();
				ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
				ctx.closePath();
				ctx.fill();
			}
		}
	}
}

4、效果图:

wKiom1P5OfzC8o7LAAIvucn_IfQ875.jpg