小球比绘制的小球快1s，求各位帮忙解答。谢谢啦。

Question

//逻辑

var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 768;

var RADIUS = 8; //半径

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

//一天24个小时，小时是两位数。100%24=5最多设置4天。

//月份如果想是4月，就必须要传3月。

const endTime=new Date(2017,2,13,20,47,52);

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

    },

    50

    );

}

function getCurrentShowTimeSeconds(){

var curTime=new Date();

var ret=endTime.getTime()-curTime.getTime();//得到的是毫秒数。

ret=Math.round(ret/1000);//把毫秒变成秒，转化成为整数。

return ret>=0?ret:0;

}

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(curSeconds%10));

    }

   

    curShowTimeSeconds=nextShowTimeSeconds;

    }

    //对已经产生小球的变化进行更新。

    updateBalls();

    console.log(balls.length);

}

//对已经产生小球的变化进行更新。

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 > cnt ){

        balls.pop();//将不符合条件的小球释放。

    }

}

//添加小球的方法。

function addBalls(x,y,num){

//对于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,//-1的多少次方。乘以4得到-4或者4。

        vy:-5,

        //随机索引方法。

        color:colors[Math.floor(Math.random()*colors.length)]

        }

        balls.push(aBall);//把这些小球放入到balls这个数组中去。

       }

}

//绘制时钟。绘制小球。

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;

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

            }

}