var WINDOW_WIDTH= 1024;var WINDOW_HEIGHT=768;var RADIUS=8;var MARGIN_TOP = 60;var MARGIN_LEFT = 30;var balls = [];const 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; setInterval( function(){ render( context ); update(); } , 50 );}function update(){ var freshtime = new Date(); var freshseconds = freshtime.getSeconds(); var freshhours =freshtime.getHours(); var freshminutes =freshtime.getMinutes(); if (seconds!=freshseconds) { if(parseInt(hours/10)!=parseInt(freshhours/10)){ addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10)); } if( parseInt(hours%10) != parseInt(freshhours%10)){ addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours/10) ); } if( parseInt(minutes/10) != parseInt(freshminutes/10) ){ addBalls( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) ); } if( parseInt(minutes%10) != parseInt(freshminutes%10) ){ addBalls( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) ); } if( parseInt(seconds/10) != parseInt(freshseconds/10) ){ addBalls( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) ); } if( parseInt(seconds%10) != parseInt(freshseconds%10) ){ addBalls( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) ); } seconds=freshseconds; } 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][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, vy:-5, color: colors[ Math.floor( Math.random()*colors.length ) ] } balls.push( aBall ) }}function render(cxt){ cxt.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT); var nowtime = new Date(); var hours =nowtime.getHours(); var minutes =nowtime.getMinutes(); var seconds = nowtime.getSeconds(); renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10), cxt ) 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,113)"; 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,y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI) cxt.closePath() cxt.fill() }}
添加回答
举报
0/150
提交
取消