使用 JS Canvas 绘制对象数组

Question

我是 JS 新手，还没有接触过 jQuery 之类的东西。我要做的就是在画布上绘制 4 个简单的圆圈。我将对象放入一个数组中，因为我计划将来可能会扩展，但这些信息是无关紧要的。

我需要帮助的是了解如何在数组中创建对象然后在画布上显示它们的基础知识。这是我功能失调的代码：

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");

var W = 400, H = 500
canvas.width = W, canvas.height = H;

var ball = [3];

for (i===0;i<=3; i++){
    ball[i] = {
        x: (Math.floor(Math.random() * 350) + 50),
        y: (Math.floor(Math.random() * 450) + 50),

        color: "red",
        radius: (Math.floor(Math.random() * 35) + 15),

    draw: balls(x, y, color, radius)
    };
}    

function balls(x, y, color, radius){   
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2*Math.PI, false);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

Answer 1

您可以像这样简单地将draw 分配给balls 函数：

ball[i] = {
    ....
    draw: balls
};

然后绘制它，一旦你定义了ball[i]，就调用它的draw()函数：

var b = ball[i];
b.draw(b.x, b.y, b.color ,b.radius); 

Example Here

编辑：不使用像ball 这样的括号是如何引用函数ball() 本身。最后一件事，您需要将for (i===0;i<=3; i++) 更改为for (i=0;i<=3; i++)。 === 是严格的比较运算符，= 是赋值。

Answer 2

你用这个方法让它变得非常复杂：

function ball(){
    this.x = Math.random() * 100;
    this.y = Math.random() * 100;
    this.radius = Math.random() * 10;
    this.color = "#" + (Math.random() * 16777215).toString(16);

    this.draw = function(){
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, false);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
    }
}

var balls = [];

for(var i = 0; i < 4; i++) {
    balls[i] = new ball();
    balls[i].draw();
}