改了一下原本的函数，变成计时器效果，动画虽然能运行但是小球的更新效果特别慢，setInterval的时间参数貌似对我不起作用啊，求大神帮助，代码如下：

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