javascript - 如何使用 Canvas 在 JS 中更改棋盘的每个框的填充颜色？

Question

我突然想到要使用 JS 和 Canvas 绘制棋盘，并且我有这段代码可以使用 for 循环绘制方框。

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

var x, y,
  boxWidth = 30,
  boxHeight = 30;

for (x = 0; x < canvas.width; x += boxWidth) {
  for (y = 0; y < canvas.height; y += boxHeight) {
    ctx.beginPath();
    ctx.rect(x, y, boxWidth, boxHeight);
    ctx.stroke();
    ctx.closePath();
  }
}

<canvas id="canvas" width="240" height="240"></canvas>

现在我想知道如何访问轴上的每个奇数框以更改它们的填充颜色(例如黑色、白色、黑色、白色等)。

我知道使用全局变量不是最好的方法，但这是一个非常小的项目，我只想了解一些关于如何交替棋盘颜色的逻辑。非常感谢您的帮助!

Answer 1

您也可以尝试只将您的值增加 1(而不是 boxWidth)，这样可以更简单地检查它们是偶数还是奇数。然后，您需要缩放或乘以 boxWidth 和 boxHeight:

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

var x, y,
  boxWidth = 30,
  boxHeight = 30;

var numbRows = Math.floor(canvas.width / boxWidth),
  numbCols = Math.floor(canvas.height / boxHeight);

ctx.save();
ctx.scale(boxWidth, boxHeight);
for (x = 0; x < numbRows; x++) {
  for (y = 0; y < numbCols; y++) {
    if ((x+y) % 2 == 0) ctx.fillStyle = 'white';
    else ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.rect(x, y, boxWidth, boxHeight);
    ctx.stroke();
    ctx.closePath();
  }
}
ctx.restore();