一、基本概要
你需要有以下基础：
- HTML Canvas基本绘图能力
- JavaScript基础
你将学到以下内容：
- 用setinterval()方法制作动画
- 利用数字点阵绘图
二、代码详解
1.主要结构目录
|---countDown
|---index.html
|---digit.js//存放数字点阵
|---countdown.js
这里的index.html和digit.js就不仔细介绍了，重点讲countdown.js。
2.setInterval()方法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
// 动画方法
setInterval(
function() {
render(context);//时钟的绘制
update();//更新
},
50//50ms
);
3.render()方法
function render(cxt) {
cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
var hour = parseInt(curShowTimeSeconds/3600);
var minute = parseInt(curShowTimeSeconds%3600/60);
var second = parseInt(curShowTimeSeconds%60);
renderDigit(MARGIN_LEFT, MARGIN_TOP + 10, parseInt(hour/10), cxt);
renderDigit(MARGIN_LEFT + 15*(R+1), MARGIN_TOP + 10, parseInt(hour%10), cxt);
renderDigit(MARGIN_LEFT + 30*(R+1), MARGIN_TOP + 10, 10, cxt);
renderDigit(MARGIN_LEFT + 39*(R+1), MARGIN_TOP + 10, parseInt(minute/10), cxt);
renderDigit(MARGIN_LEFT + 54*(R+1), MARGIN_TOP + 10, parseInt(minute%10), cxt);
renderDigit(MARGIN_LEFT + 69*(R+1), MARGIN_TOP + 10, 10, cxt);
renderDigit(MARGIN_LEFT + 78*(R+1), MARGIN_TOP + 10, parseInt(second/10), cxt);
renderDigit(MARGIN_LEFT + 93*(R+1), MARGIN_TOP + 10, parseInt(second%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, R, 0, 2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
renderDigit(距离左边界,距离上边界,该位置的数字,context);
至于15*(R + 1),30,39...这些数字都是算出来的比较合适的位置，每个数字占了7*10个小格子，为了数字中的一个个小点不粘连在一起，把每个小格子的边长计为2*(R+1)，又为了使每个数字不粘连在一起，数字之间的空格宽(R+1)；当中还有“：”占了4*10，那就另当别论，相信你们都懂得。
下面就是renderDigit()方法
function renderDigit(x, y, num, cxt) {
cxt.fillStyle = "#a3de83";
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+(2*j+1)*(R+1), y+(2*i+1)*(R+1), R, 0, 2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
4.update()方法
function update() {
var nextShowTimeSeconds = getCurrentShowTimeSeconds();
var nextHours = parseInt(nextShowTimeSeconds/3600);
var nextMinutes = parseInt(nextShowTimeSeconds%3600/60);
var nextSeconds = parseInt(nextShowTimeSeconds%60);
var curHours = parseInt(curShowTimeSeconds/3600);
var curMinutes = parseInt(curShowTimeSeconds%3600/60);
var curSeconds = parseInt(curShowTimeSeconds%60);
if(nextSeconds != curSeconds) {
if(parseInt(nextHours/10) != parseInt(curHours/10)) {
addBalls(MARGIN_LEFT, MARGIN_TOP,parseInt(curHours/10));
}
if(parseInt(nextHours%10) != parseInt(curHours%10)) {
addBalls(MARGIN_LEFT + 15*(R+1), MARGIN_TOP,parseInt(curHours%10));
}
if(parseInt(nextMinutes/10) != parseInt(curMinutes/10)) {
addBalls(MARGIN_LEFT + 39*(R+1), MARGIN_TOP, parseInt(curMinutes/10));
}
if(parseInt(nextMinutes%10) != parseInt(curMinutes%10)) {
addBalls(MARGIN_LEFT + 54*(R+1), MARGIN_TOP, parseInt(curMinutes%10));
}
if(parseInt(nextSeconds/10) != parseInt(curSeconds/10)) {
addBalls(MARGIN_LEFT + 78*(R+1), MARGIN_TOP, parseInt(curSeconds/10));
}
if(parseInt(nextSeconds%10) != parseInt(curSeconds%10)) {
addBalls(MARGIN_LEFT + 93*(R+1), MARGIN_TOP, parseInt(curSeconds%10));
}
curShowTimeSeconds = nextShowTimeSeconds;
}
updateBalls();
//console.log(balls.length);
}
update()实现动画，通过比较时间的不同来改变显示的倒计时的时间。其中
curShowTimeSeconds = nextShowTimeSeconds;
改变了全局变量，于是显示的时间发生变化。
addBalls(距离左边界，距离上边界，改变前的数字)
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+(2*j+1)*(R+1),
y:y+(2*i+1)*(R+1),
g:1.5+Math.random(),//y轴方向加速度
vx:Math.pow(-1, Math.ceil(Math.random()*1000))*4,//x轴方向速度
vy:-5,//y轴方向速度
color:ballColor[Math.floor(Math.random()*ballColor.length)]//随机颜色
};
balls.push(aBall);//存进aBall[]数组
}
}
}
}
用该方法得到当前的倒计时时间
function getCurrentShowTimeSeconds() {
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();//ms
ret = Math.round(ret/1000);//转换整数
return ret >= 0 ? ret : 0;
}
5.updateBalls()方法
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 >= WINDOW_HEIGHT - R) {
balls[i].y = WINDOW_HEIGHT - R;
balls[i].vy = -balls[i].vy * 0.75;
}
}
//为了控制小球数量
var cnt = 0;
for(var i = 0; i < balls.length; i++) {
if(balls[i].x + R > 0 && balls[i].x - R < WINDOW_WIDTH) {
balls[cnt++] = balls[i];
}
}
while(balls.length > cnt) {
balls.pop();
}
}
这一方法使每个小球随机地运动起来。
三、效果
学习来自--慕课网-炫丽的倒计时效果Canvas绘图与动画基础