Question

我正在使用new Ball()构造函数从Ball函数创建一个新球。但是，它不起作用。我的代码包含constructor和方法draw，它在画布上绘制ball。然后在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);
    }

Answer 1

你必须在每一帧都画球，而不是在球的产生时。将绘图调用移至onEachStep函数：

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

然后您不需要该全局ball变量。检查演示，我修了几件事。此外，如果您想要更流畅的动画，则应该查看requestAnimationFrame。

演示： http://jsfiddle.net/t04xoxdq/1/

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

1 个答案: