效果图:
在上一篇倒计时的基础上，对tangram.js做了如下修改：
WINDOW_WIDTH = 1024;
WINDOW_HEIGHT = 768;
//半径
var RADIUS = 8;
//顶边距
var MARGIN_TOP = 250;
//左边距
var MARGIN_LEFT = 30;
//截止时间
var endTime = new Date(2017,10,30,23,30,00);
//当前时间
var curShowTimeSeconds = 0;
//小球数组
var balls = [];
//颜色数组
var colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
/**
* 启动加载
*/
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_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 nextMinute = parseInt((nextShowTimeSeconds-nexthours*3600)/60);
var nextsecond = parseInt(nextShowTimeSeconds%60);
var curhours = parseInt(curShowTimeSeconds/3600);
var curMinute = parseInt((curShowTimeSeconds-curhours*3600)/60);
var cursecond = parseInt(curShowTimeSeconds%60);
if(nextShowTimeSeconds != curShowTimeSeconds){
if(parseInt(nexthours/10) != parseInt(curhours/10)){
allBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(nexthours/10));
}
if(parseInt(nexthours%10) != parseInt(curhours%10)){
allBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(nexthours%10));
}
if(parseInt(nextMinute/10) != parseInt(curMinute/10)){
allBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(nextMinute/10));
}
if(parseInt(nextMinute%10) != parseInt(curMinute%10)){
allBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(nextMinute%10));
}
if(parseInt(nextsecond/10) != parseInt(cursecond/10)){
allBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(nextsecond/10));
}
if(parseInt(nextsecond%10) != parseInt(cursecond%10)){
allBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nextsecond%10));
}
curShowTimeSeconds = nextShowTimeSeconds;
}
updateBalls();
}
/**
* 把数字上的小球加上运动属性并加入到balls数组中
* @param {Object} x
* @param {Object} y
* @param {Object} num
*/
function allBalls(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+(RADIUS+1)+j*2*(RADIUS+1),//圆心坐标x
y:y+(RADIUS+1)+i*2*(RADIUS+1),//圆心坐标y
g:1.5+Math.random(),//加速度
vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//x方向的速度，pow取-1的次方，ceil取整数,结果是-4至4
vy:-5,//y方向的速度
color:colors[Math.floor(Math.random()*colors.length)],//floor下取整结果为:0-9
}
balls.push(aBall);
}
}
}
}
/**
* 小球不断的变化
*/
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-RADIUS){
balls[i].y = WINDOW_HEIGHT-RADIUS;
balls[i].vy =- balls[i].vy*0.7;
}
}
}
/**
* 根据时间调用绘画方法绘画每个数字
* @param {Object} context
*/
function render (context){
context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
var hours = parseInt(curShowTimeSeconds/3600);
var Minute = parseInt((curShowTimeSeconds-hours*3600)/60);
var second = parseInt(curShowTimeSeconds%60);
renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),context);
renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),context);
renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,context);
renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(Minute/10),context);
renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(Minute%10),context);
renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,context);
renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(second/10),context);
renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(second%10),context);
for (var i = 0; i < balls.length; i++) {
context.fillStyle = balls[i].color;
context.beginPath();
context.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI);
context.closePath();
context.fill();
}
}
/**
* 绘画时针
* @param {Object} x 圆心x
* @param {Object} y 圆心y
* @param {Object} num 数字
* @param {Object} context
*/
function renderDigit(x,y,num,context){
context.fillStyle = "rgb(0,102,153)";
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){
context.beginPath();
context.arc(x+(RADIUS+1)+j*2*(RADIUS+1),y+(RADIUS+1)+i*2*(RADIUS+1),RADIUS,0,2*Math.PI);
context.closePath();
context.fill();
}
}
}
}
