小球不会下落,一直叠加
var Width=1024;
var Height=768;
var Ru=8; //小圆的半径,后面圆心X/Y坐标加1,是为了美观
var Top =60; // 数字距离画布上边距
var Left =30; // 数字距离画布左边距
var endDate =new Date(2014,10,3,23,59,59);
var showTimeSeconds =0; // 用来存放开始时与结束时之间的秒数
var balls=[]; //存放小球
var ballColors=["#33b5e5","#0099cc","#a6c","#93c","#9c0","#690","#fb3","#f80","#f44","#c00"];
window.onload =function(){
var canvas =document.getElementById("canvas");
canvas.width=Width;
canvas.height=Height;
var context =canvas.getContext("2d");
showTimeSeconds =getTimeSeconds();
setInterval(function(){
render(context);
upDate();
},100);
}
function upDate(){
var nextShowTimeSeconds =getTimeSeconds();
var nextHours =parseInt( nextShowTimeSeconds / 3600);
var nextMinutes =parseInt( (nextShowTimeSeconds-nextHours*3600)/60 );
var nextSeconds =nextShowTimeSeconds%60;
var curHours =parseInt( showTimeSeconds / 3600);
var curMinutes =parseInt( (showTimeSeconds-curHours*3600)/60 );
var curSeconds =showTimeSeconds%60;
if(nextSeconds != curSeconds){
if(parseInt(curHours/10) != parseInt(nextHours/10)){
addBalls(Left + 0*(Ru+1) ,Top,parseInt(curHours/10));
}
if(parseInt(curHours%10) != parseInt(nextHours%10)){
addBalls(Left + 15*(Ru+1) ,Top,parseInt(curHours%10));
}
if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){
addBalls(Left + 39*(Ru+1) ,Top,parseInt(curMinutes/10));
}
if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){
addBalls(Left + 54*(Ru+1) ,Top,parseInt(curMinutes%10));
}
if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){
addBalls(Left + 78*(Ru+1) ,Top,parseInt(curSeconds/10));
}
if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){
addBalls(Left + 93*(Ru+1) ,Top,parseInt(curSeconds%10));
}
showTimeSeconds =nextShowTimeSeconds;
}
upDateBalls();
}
function upDateBalls(){
for(var i=0;i<balls.length;i++){
balls[i].x +=bals[i].vx;
balls[i].y +=balls[i].vy;
balls[i].vy +=balls[i].g;
if(balls[i].y >= Height-Ru){
balls[i].y =Height-Ru;
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][j] == 1){
var aBall={
x: x+j*2*(Ru+1)+(Ru+1),
y: y+i*2*(Ru+1)+(Ru+1),
g: 1.5+Math.random(), //重力
vx: Math.pow(-1,Math.ceil(Math.random()*1000))*4, //x轴方向随机运动
vy: -5, //y轴有一种上抛的效果
color: ballColors[Math.floor(Math.random()*ballColors.length)]
};
balls.push(aBall);
}
}
}
}
function getTimeSeconds(){
var curTime =new Date();
var ret =endDate.getTime()-curTime.getTime();
ret =Math.round(ret/1000);
return ret>=0 ? ret :0 ;
}
function render(cxt){
cxt.clearRect(0,0,Width,Height); // 刷新,防止叠加
var hours =parseInt( showTimeSeconds / 3600);
var minutes =parseInt( (showTimeSeconds-hours*3600)/60 );
var seconds =showTimeSeconds%60;
/* 把数字拆分成两部分绘制:12 → 1+2 等 */
renderDigit(Left,Top,parseInt(hours/10) ,cxt); // 数字之间占15个大小
renderDigit(Left + 15*(Ru+1) ,Top,parseInt(hours%10) ,cxt);
renderDigit(Left + 30*(Ru+1) ,Top ,10 ,cxt); // digit[10]是冒号的点阵图,占9个大小
renderDigit(Left + 39*(Ru+1) ,Top ,parseInt(minutes/10) ,cxt);
renderDigit(Left + 54*(Ru+1) ,Top ,parseInt(minutes%10) ,cxt);
renderDigit(Left + 69*(Ru+1) ,Top,10,cxt);
renderDigit(Left + 78*(Ru+1) ,Top,parseInt(seconds/10) ,cxt);
renderDigit(Left + 93*(Ru+1) ,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,Ru,0,2*Math.PI);
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++){ //数字对应的点阵图0、1、2。。。或者是 冒号‘:’
for(var j=0;j<digit[num][i].length;j++){ // 判断点阵图中的每一行
if(digit[num][i][j] == 1){ // 1:绘制 0:不绘制
cxt.beginPath();
cxt.arc(x+j*2*(Ru+1)+(Ru+1) ,y+i*2*(Ru+1)+(Ru+1) ,Ru , 0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}