canvas小球 时间倒计时demo-优化
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; } </style> </head> <body> <canvas id="canvas" style="height: 99%"></canvas> </body> <script src="digit.js"></script> <script src="countdown.js"></script> <script></script> </html>
var digit= [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0] ],//0 [ [0,0,0,1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [1,1,1,1,1,1,1] ],//1 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1] ],//2 [ [1,1,1,1,1,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//3 [ [0,0,0,0,1,1,0], [0,0,0,1,1,1,0], [0,0,1,1,1,1,0], [0,1,1,0,1,1,0], [1,1,0,0,1,1,0], [1,1,1,1,1,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,1,1] ],//4 [ [1,1,1,1,1,1,1], [1,1,0,0,0,0,0], [1,1,0,0,0,0,0], [1,1,1,1,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//5 [ [0,0,0,0,1,1,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//6 [ [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0] ],//7 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//8 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,1,1,0,0,0,0] ],//9 [ [0,0,0,0,0,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,0,0,0] ]//: ];
var window_width=1024, window_height=768, RADIUS= 8, MARGIN_TOP=60, MARGIN_LEFT=30, //endTime=new Date(2017,5,10,12,47,52),//第二个参数是月份，值为0-11,表示1月 11表示12月 endTime=new Date(); endTime.setTime(endTime.getTime()+3*24*3600*1000);//设置为距离当前时间还有3天 curShowTimeSeconds=0; var balls=[], colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF6666","#C01110"]; window.onload=function(){ window_width=document.body.clientWidth; window_height=document.body.clientHeight; MARGIN_LEFT=Math.round(window_width/10); RADIUS=Math.round(window_width*4/5/108)-1; 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(),ret=endTime.getTime()-curTime.getTime(); ret=Math.round(ret/1000); return ret >=0?ret:0; } function update(){ var nextShowTimeSeconds=getCurrentShowTimeSeconds(), nextHours=parseInt(nextShowTimeSeconds/3600), nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60), nextSeconds=parseInt(nextShowTimeSeconds%60), curHours=parseInt(curShowTimeSeconds/3600), curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60), curSeconds=parseInt(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(nextSeconds%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; } } var cnt=0; for(var i=0;i<balls.length;i++){ if(balls[i].x+RADIUS>0 && balls[i].x - RADIUS<window_width){ balls[cnt++]=balls[i]; } } while(balls.length>Math.min(300,cnt)){ balls.pop(); } } 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*(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,//取-4或者正4 vy:-5, color:colors[Math.floor(Math.random()*colors.length)] }; balls.push(aBall); } } } } function render(ctx){ ctx.clearRect(0,0,window_width,window_height); var hours=parseInt(curShowTimeSeconds/3600),minutes=parseInt((curShowTimeSeconds-hours*3600)/60),seconds=parseInt(curShowTimeSeconds%60); renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),ctx); renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),ctx); renderDigit(MARGIN_LEFT+28*(RADIUS+1),MARGIN_TOP,10,ctx); renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx); renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx); renderDigit(MARGIN_LEFT+67*(RADIUS+1),MARGIN_TOP,10,ctx); renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx); renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx); for(var i=0;i<balls.length;i++){ ctx.fillStyle=balls[i].color; ctx.beginPath(); ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); } } function renderDigit(x,y,num,ctx){//绘制数字 ctx.fillStyle="rgb(0,102,153)"; for(var i=0;i<digit[num].length;i++){//i是行数 j是列数 for(var j=0;j<digit[num][i].length;j++){ if(digit[num][i][j] == 1){ ctx.beginPath();//圆心的位置centerX:x+j*2*(R+1)+(R+1) centerY:y+i*2*(R+1)+(R+1) ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI); ctx.closePath(); ctx.fill() } } } }
var window_width=1024, window_height=768, RADIUS= 8, MARGIN_TOP=60, MARGIN_LEFT=30, //endTime=new Date(2017,5,10,12,47,52),//第二个参数是月份，值为0-11,表示1月 11表示12月 /* endTime=new Date(); endTime.setTime(endTime.getTime()+3*24*3600*1000);//设置为距离当前时间还有3天*/ curShowTimeSeconds=0; var balls=[], colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF6666","#C01110"]; window.onload=function(){ window_width=document.body.clientWidth; window_height=document.body.clientHeight; MARGIN_LEFT=Math.round(window_width/10); RADIUS=Math.round(window_width*4/5/108)-1; 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(), //ret=endTime.getTime()-curTime.getTime(); ret=curTime.getHours()*3600*1000+curTime.getMinutes()*60*1000+curTime.getSeconds()*1000; ret=Math.round(ret/1000); return ret >=0?ret:0; } function update(){ var nextShowTimeSeconds=getCurrentShowTimeSeconds(), nextHours=parseInt(nextShowTimeSeconds/3600), nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60), nextSeconds=parseInt(nextShowTimeSeconds%60), curHours=parseInt(curShowTimeSeconds/3600), curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60), curSeconds=parseInt(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(nextSeconds%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; } } var cnt=0; for(var i=0;i<balls.length;i++){ if(balls[i].x+RADIUS>0 && balls[i].x - RADIUS<window_width){ balls[cnt++]=balls[i]; } } while(balls.length>Math.min(300,cnt)){ balls.pop(); } } 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*(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,//取-4或者正4 vy:-5, color:colors[Math.floor(Math.random()*colors.length)] }; balls.push(aBall); } } } } function render(ctx){ ctx.clearRect(0,0,window_width,window_height); var hours=parseInt(curShowTimeSeconds/3600),minutes=parseInt((curShowTimeSeconds-hours*3600)/60),seconds=parseInt(curShowTimeSeconds%60); renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),ctx); renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),ctx); renderDigit(MARGIN_LEFT+28*(RADIUS+1),MARGIN_TOP,10,ctx); renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx); renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx); renderDigit(MARGIN_LEFT+67*(RADIUS+1),MARGIN_TOP,10,ctx); renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx); renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx); for(var i=0;i<balls.length;i++){ ctx.fillStyle=balls[i].color; ctx.beginPath(); ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); } } function renderDigit(x,y,num,ctx){//绘制数字 ctx.fillStyle="rgb(0,102,153)"; for(var i=0;i<digit[num].length;i++){//i是行数 j是列数 for(var j=0;j<digit[num][i].length;j++){ if(digit[num][i][j] == 1){ ctx.beginPath();//圆心的位置centerX:x+j*2*(R+1)+(R+1) centerY:y+i*2*(R+1)+(R+1) ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI); ctx.closePath(); ctx.fill() } } } }
