Javascript 使用JS创建几个球不起作用

我正在使用

newball（）

构造函数从Ball函数创建一个新的Ball。然而，它不起作用。下面我的代码由

构造函数

和在画布上绘制

球的方法
draw
组成。然后在
init
函数中，我循环并使用该构造函数创建5个球，然后在循环中调用
draw
函数。然后我使用
setInterval
为它们设置动画。但不知何故，它并没有在画布上显示球

这是代码。我如何解决这个问题

    function Ball (radius, color) {
        this.ballPosX = 0;
        this.ballPosY = 0;
        this.ballRadius = radius;
        this.color = color;
        this.speedX = 0;
        this.speedY = 0; 
    }

    Ball.prototype.draw = function (context) {
      context.fillStyle = this.color;
      context.beginPath();
      context.arc(this.ballPosX, this.ballPosY, this.ballRadius, 0, 2*Math.PI,true);
      context.closePath();
      context.fill();
    };

    init();

    function init () {
      for (var i = 0; i < 5; i++) {
        ball = new Ball(25, 'blue');
        ball.ballPosX = 50;
        ball.ballPosY = 75;
        ball.speedX = Math.random() * 5;
        ball.speedY = (Math.random() - 0.5) * 4;
        ball.draw(context);
        balls.push(ball);
      }
      setInterval(onEachStep, 1000/60);
    }

功能球（半径、颜色）{
这个.ballPosX=0；
这个.ballPosY=0；
这个。半径=半径；
这个颜色=颜色；
这是0.speedX=0；
该值为0；
}
Ball.prototype.draw=函数（上下文）{
context.fillStyle=this.color；
context.beginPath（）；
弧（this.ballPosX，this.ballPosY，this.ballRadius，0,2*Math.PI，true）；
closePath（）；
context.fill（）；
};
init（）；
函数init（）{
对于（变量i=0；i<5；i++）{
球=新球（25，‘蓝色’）；
ball.ballPosX=50；
ball.ballPosY=75；
ball.speedX=Math.random（）*5；
ball.speedY=（Math.random（）-0.5）*4；
球。画（上下文）；
推（球）；
}
设置间隔（每一步，1000/60）；
}
您必须在每一帧绘制球，而不是在生成球时绘制。将绘图调用移动到
onEachStep
函数：

...
bal.ballPosX += ball.speedX; 
bal.ballPosY += ball.speedY;
...
bal.draw(context);

那么您就不需要全局
ball
变量了。检查演示，我修复了一些东西。此外，您还应该研究是否需要更平滑的动画

演示：