为什么小球的渲染要放到render函数，不能放到addballs函数里面吗
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
//var endTime = new Date();
//endTime.setTime( endTime.getTime() + 3600*1000 )
var curShowTimeSeconds = 0;
var balls = [];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
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;
MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);
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();
}
,
30
);
}
function getCurrentShowTimeSeconds() {
var curTime = new Date();
var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
return ret;
}
function update(){
var nextShowTimeSeconds = getCurrentShowTimeSeconds();
var nextHours = parseInt( nextShowTimeSeconds / 3600);
var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 );
var nextSeconds = nextShowTimeSeconds % 60;
var curHours = parseInt( curShowTimeSeconds / 3600);
var curMinutes = parseInt( (curShowTimeSeconds - curHours * 3600)/60 );
var curSeconds = 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();
// console.log( balls.length);
}
function updateBalls(){
for( var i = 0 ; i < balls.length ; i ++ ){
balls[i].x += balls[i].vx;
var c = 1.0;
if( balls[i].y + RADIUS + balls[i].vy >= WINDOW_HEIGHT ){
c = ( WINDOW_HEIGHT - (balls[i].y+ RADIUS) ) / balls[i].vy;
// console.log( c );
}
balls[i].y += balls[i].vy;
balls[i].vy += c * balls[i].g;;
if( balls[i].y >= WINDOW_HEIGHT-RADIUS ){
balls[i].y = WINDOW_HEIGHT-RADIUS;
balls[i].vy = - Math.abs(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 > 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,
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 hours = parseInt( curShowTimeSeconds / 3600);
// var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 );
// var seconds = curShowTimeSeconds % 60;
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 + 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 , false );
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 ++ ) {
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+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 , 2*Math.PI )
cxt.closePath();
cxt.fill();
}
}
}
}
