javascript - 如何在 JavaScript 中使用循环制作二维背景？

Question

如何使用 fill.rect javascript 函数中的循环制作棋盘 8x8 2 维的棋盘背景。

我尝试创建第一个循环，但无法以二维方式进行。我尝试将其放入模数中，似乎很难获得交替迭代它的逻辑。

let canvas = document.getElementById('gameScreen');
let context = canvas.getContext("2d");

context.fillStyle = "#000";
for (let i = 0; i <= 160; i++) {
    context.fillRect(i, 0, 20, 20);
    i += 40;
}

控制台中没有可见的错误消息。

预期输出应该是一个 8 x 8 黑白交替的正方形。

谢谢

Answer 1

我刚刚想出了两个循环，它们绘制每条线并更改起点

let canvas = document.getElementById('gameScreen');
let context = canvas.getContext("2d");

context.fillStyle = "#000";

var  start = 0
for (let i = 0; i <= 160; i += 20) {
    for (let j = start; j <= 160; j += 40){
            context.fillRect(j, i, 20, 20);
    }
    start == 0 ? start += 20 : start = 0
}

https://jsfiddle.net/2n4xa873/1/