改了一下原本的函數(shù)，變成計時器效果，動畫雖然能運行但是小球的更新效果特別慢，setInterval的時間參數(shù)貌似對我不起作用啊，求大神幫助，代碼如下：

var?WINDOW_WIDTH?=?1024,
?WINDOW_HEIGHT?=?768;
var?RADIUS?=?8;
var?MARGIN_TOP?=?60,
?MARGIN_LEFT?=?30;
var?timer;
var?balls?=?[];
const?colors?=?['#33b5e5',?'#0099cc',?'#aa66cc',?'#9933cc',?'#99cc00',?'#669900',?'#ffbb33',?'#ff8800',?'#ff4444',?'#cc0000'];

var?t?=?time();


window.onload?=?function(){
?var?canvas?=?document.getElementById('canvas');
?var?context?=?canvas.getContext('2d');

?canvas.width?=?WINDOW_WIDTH;
?canvas.height?=?WINDOW_HEIGHT;

?timer?=?setInterval(function(){
??render(context);
??update();
?},?50);
}

function?time(){
?var?dat?=?new?Date();
?return?dat;
}


function?render(cxt){
?cxt.clearRect(0,?0,?WINDOW_WIDTH,?WINDOW_HEIGHT);

?var?hours?=?t.getHours(),
??minutes?=?t.getMinutes(),
??seconds?=?t.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,?5*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();
???}
??}
?}
}

function?update(){
?var?data2?=?time();
?var?hours2?=?data2.getHours(),
??minutes2?=?data2.getMinutes(),
??seconds2?=?data2.getSeconds();
?var?hours1?=?t.getHours(),
??minutes1?=?t.getMinutes(),
??seconds1?=?t.getSeconds();
?if?(parseInt(seconds1)?!=?parseInt(seconds2))?{
??if(parseInt(hours2/10)!=parseInt(hours1/10)){
???addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(hours1/10));
??}
??if(parseInt(hours2%10)!=parseInt(hours1%10))
????{addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours1%10));}
??
??if(parseInt(minutes2/10)!=parseInt(minutes1/10))
????{addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes1/10));}
??
??if(parseInt(minutes2%10)!=parseInt(minutes1%10))
????{addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes1%10));}
??
??if(parseInt(seconds2/10)!=parseInt(seconds1/10))
????{addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds1/10));}
??
??if(parseInt(seconds2%10)!=parseInt(seconds1%10))
????{addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds1%10));}
??
??t=data2;
??updateBalls();
?}
}

function?updateBalls(){
?for?(var?i?=?0;?i?<?balls.length;?i++)?{
??balls[i].x?+=?balls[i].vx;
??balls[i].y?+=?5?*?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);
???}
??}
?}
}