小球不会下落,一直叠加
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(); } } } }