Javascript 然而，我'；我遇到了一些障碍

我想实现的是——创建如下二维数组：

var board = [
    [1, 0, 1],
    [0, 0, 0],
    [1, 1, 1]
];

然后创建一个300px的画布，其中将有3x3个矩形，每个矩形的宽度和高度均为100px，每个矩形将根据数组元素值具有不同的颜色

值为1时，颜色应为红色，值为0时，颜色应为蓝色

我能够通过使用嵌套循环在画布中创建3x3板，但是，我使用硬编码数字创建板，而不是查找2d数组的长度并根据长度创建行和列

问题是，我知道如何只获取法线数组的长度，而不是二维数组的长度。另一个问题是，我不知道如何根据数组元素值决定矩形的颜色

到目前为止，我的代码是：

 var board = [
    [1, 0, 1],
    [0, 0, 0],
    [1, 1, 1]
];

function setup() {
    createCanvas(300, 300);
}

function draw() {
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            var x = i*100;
            var y = j*100;
            fill(222);
            stroke(0);
            rect(x, y, 100, 100);
        }
    }
}

var板=[
[1, 0, 1],
[0, 0, 0],
[1, 1, 1]
];
函数设置（）{
createCanvas（300300）；
}
函数绘图（）{
对于（变量i=0；i<3；i++）{
对于（var j=0；j<3；j++）{
var x=i*100；
变量y=j*100；
填充（222）；
冲程（0）；
rect（x，y，100100）；
}
}
}

您可以使用此代码

    var board = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];

function setup() {
    createCanvas(300, 300);
}

function draw() {
    for (var i = 0; i < board.length ; i++) {
        for (var j = 0; j < board[i].length; j++) {
            var x = j*100;
            var y = i*100;
            if(board[i][j] == 0)
                fill(211);
            else
                fill(10);
            stroke(0);
            rect(x, y, 100, 100);
        }
    }
}

var板=[
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];
函数设置（）{
createCanvas（300300）；
}
函数绘图（）{
对于（变量i=0；i

您可以使用嵌套的

forEach

循环，并使用索引根据当前索引和单元格大小获取

x

和

y

位置

var数据=[
[1, 0, 1],
[0, 0, 0],
[1, 1, 1]
];
让董事会；
函数设置（）{
createCanvas（200200）；
板=新板（数据，50）；
board.create（）；
}
函数绘图（）{
board.show（）
}
班级委员会{
构造函数（数据、单元格大小）{
这个数据=数据；
this.cells=[]；
this.cellsize=cellsize；
}
创建（）{
this.data.forEach（（arr，i）=>{
arr.forEach（（类型，j）=>{
设x=this.cellsize*j；
设y=this.cellsize*i；
this.cells.push（新单元格（type，x，y，this.cellsize））
})
})
}
show（）{
this.cells.forEach（cell=>cell.show（））；
}
}
类单元{
构造函数（类型、x、y、大小）{
this.type=type；
这个.x=x；
这个。y=y；
这个。大小=大小；
}
show（）{
填充（this.type==1？“红色”：“蓝色”）
rect（this.x，this.y，this.size，this.size）
}
}

---

我只有一个问题，正如您在我的2d数组中看到的，[1,0,1]是最上面的一行，但是，当我可视化它时，这两个矩形位于画布的左侧，就好像画布已经向左旋转了90度一样。知道为什么会这样吗？