倒计时能显示，小球显示不出来
var WINDOW_WIDTH=980;
var WINDOW_HEIGHT=768;
var radius = 8;
var margin_top = 60;
var margin_left = 30;
const endTime=new Date(2017,3,24,18,47,52);
var curShowTimeSeconds = 0;
var balls=[];
const colors=["#428B46","#B7B56E","#D6D88B","#C7F5FE","#FCC8F8","#EAB4F8","#F3F798","#CA3E6B","#FA8383","#9DD3CC"]
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 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){
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();
}
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.75;
}
}
}
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] == 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))*4,
vy:-5,
color:colors[Math.floor(Math.random()*colors.length)]
};
balls.push(aBall);
}
}
function getCurrentShowTimeSeconds(){
var curTime =new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret/1000);
return ret >= 0 ? ret:0;
}
function render(cxt){
cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
var hours = parseInt(curShowTimeSeconds/3600);
var minutes=parseInt((curShowTimeSeconds - hours*3600)/60);
var seconds= curShowTimeSeconds%60;
renderDigit(margin_left,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);
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);
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 = "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){
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();
}
}
}
}
