javascript - 试图通过创建一个 3x3 板然后将其可视化来找出二维阵列，但是，我遇到了一些障碍

Question

我想要实现的是这个 - 创建像这样的二维数组:

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

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

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

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

问题是我只知道如何获取普通数组的长度而不是 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);
        }
    }
}

Answer 1

您可以使用此代码

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