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

使用JS Canvas绘制对象数组

2 个答案: