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.x += balls.vx;
balls.y += balls.vy;
balls.vy += balls.g;
if( balls.y >= WINDOW_HEIGHT-RADIUS ){
balls.y = WINDOW_HEIGHT-RADIUS;
balls.vy = - balls.vy*0.75;
}
}
}
function addBalls( x , y , num ){
for( var i = 0 ; i < digit[num].length ; i ++ )
for( var j = 0 ; j < digit[num].length ; j ++ )
if( digit[num][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.color;
cxt.beginPath();
cxt.arc( balls.x , balls.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 |
天盟APP下载
