一模一样的代码只是改成了显示系统时间为什么没有效果

Question

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()

}

}