Question

我希望能够绘制一个球阵列，我可以将球推入阵列（单击画布时）。

如果我使用ball = new Ball创建它，我可以在画布上绘制1个球，但是一旦我尝试从数组内部绘制它就会中断。

我使用for

在balls[i].draw循环中绘图

以下是相关代码：

function init(){
defaultBall();
    for(i=0;i<balls.length;i++){
        balls[i].draw;
    }
    ball.draw();
}

function Ball(X, Y, Radius, Color){
    this.X = X || 0;
    this.Y = Y || 0;
    this.radius = 5;
    this.color = Color;
}
Ball.prototype.draw = function(){
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.X, this.Y, this.radius, 10, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

var balls = [];

function defaultBall(){
    addBall(new Ball(50, 50, 5, '#6B7E00'));
    addBall(new Ball(150, 50, 5, '#6B7E00'));
}

function addBall(ball){
    balls.push(ball);
}
var ball = new Ball(50, 50, 5, '#6B7E00');

我应该如何制定循环以便能够画出球？

帮助appriciated。

Answer 1

也许

balls[i].draw;

应该是

balls[i].draw();

第4行

Answer 2

您的init方法不会再次被调用。如果你改变了

function addBall(ball){
    balls.push(ball);
    ball.draw();
}

到

function addBall(ball){
    balls.push(ball);
}

你会看到新的球。你需要有某种机制再次调用init（又名draw）。

正如Frits指出的那样，你需要使用draw（）而不是draw。

Answer 3

你的代码运行得很好，只是你的球循环有一个小错误。

defaultBall();
for(i=0;i<balls.length;i++){
    balls[i].draw;
}
ball.draw();

在循环播放球时，您忘记使用括号来调用绘制方法。修复很简单：

defaultBall();
for(i=0;i<balls.length;i++){
    balls[i].draw();
}
ball.draw();

请注意，现在您的球将按预期显示。当使用这个新的修复程序编辑小提琴以循环球时，你可以看到两个绿球出现。

绘制一系列球不起作用

3 个答案: