在画布中一一着色矩形答案

【问题标题】：Color rectangle one by one in a canvas在画布中一一着色矩形
【发布时间】：2020-12-15 15:00:51
【问题描述】：

我有画布，上面绘制了许多矩形，以便制作一个网格。我想要的是在网格中一个一个地为每个矩形着色，直到每个矩形都被着色为黑色，然后再次选择其中的几个以同样的方式一个一个地着色为白色。我尝试了几种使用“for”循环和“setTimeout”的方法，但没有成功。我最近开始使用 javascript，这就是我需要帮助的原因。

此代码仅包括网格的制作，因为该部分未解决：

var canvas;
var ctx;

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

tileW = 20;
tileH = 20;

tileRowCount = 25;
tileColCount = 40;

var tile = [];

for (c = 0; c < tileColCount; c++) {
  tile[c] = [];
  for (r = 0; r < tileRowCount; r++){
    tile[c][r] = {
      x: c * (tileW + 3),
      y: r * (tileH + 3),
      state: 'e'
    }; //state e for empty
  }
}

for (c = 0; c < tileColCount; c++)
  for (r = 0; r < tileRowCount; r++) {
    ctx.beginPath();
    ctx.fillStyle = '#AAAAAA';
    ctx.rect(tile[c][r].x, tile[c][r].y, tileW, tileH);
    ctx.closePath();
    ctx.fill();
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <canvas id="canvas" width='1000' height='600'></canvas>
  <script type="text/javascript" src='data.js'></script>
</body>

</html>

【问题讨论】：

您有语法错误。在此行 for (c = 0; c < tileColCount; c++) 之后，您缺少 {
很抱歉，当我粘贴我在编辑器上编写的代码时，一定发生了这种情况。但问题不在于它使用 for 循环一一着色矩形。

标签： html for-loop canvas settimeout jss

【解决方案1】：

更新您的渲染代码以使用二维上下文中的fillRect 方法。

替换这个：

ctx.beginPath();
ctx.fillStyle = '#AAAAAA';
ctx.rect(tile[c][r].x, tile[c][r].y, tileW, tileH);
ctx.closePath();
ctx.fill();

有了这个：

ctx.fillStyle = "#AAAAAA";
ctx.fillRect(tile[c][r].x, tile[c][r].y, tileW, tileH);

【讨论】：

【解决方案2】：

不清楚你想要什么。我的猜测是你想要一个棋盘格。以下将这样做。

Remainder 运算符

运算符% 在除法后返回remainder。例如3 % 2 是 1，4 % 2 是 0

我们可以使用余数运算符让我们知道每个正方形的颜色。当我们倒数行数时，行数和 2 的剩余部分将在 0 和 1 之间切换。对于每一列，我们希望相反。如果您将行数添加到列数并获得余数，我们将获得所需的结果。示例(r + c) 将给出(0 + 0) % 2 == 0、(1 + 0) % 2 == 1、(2 + 0) % 2 == 0、(3 + 0) % 2 == 1，然后是下一列(0 + 1) % 2 == 1、(1 + 1) % 2 == 0、(2 + 1) % 2 == 1、(3 + 1) % 2 == 0。等等。

% 运算符的 precedence 比 addition 运算符 + 更高，因此我们需要将 grouping 运算符 ( ) 放在加法周围。

例如，3 + 1 % 2 将等于 4。1 % 2 先完成，然后添加 3，而 (3 + 1) % 2 将等于 0。(3 + 1) 先完成，然后完成余数

Ternary 运算符

我们可以最简单地使用ternary 运算符? 来做到这一点。例如color = (c + r) % 2 ? "white" : "black" 与if ((c + r) % 2 === 1) { color = "white" } else { color = "black" } 相同

示例

const ctx = canvas.getContext('2d');
const tileW = 20;
const tileH = 20;
const tileRowCount = 25;
const tileColCount = 40;
const tiles = [];

for (let c = 0; c < tileColCount; c++) {
    for (let r = 0; r < tileRowCount; r++) {
        tiles.push({
            x: c * (tileW + 3),
            y: r * (tileH + 3),
            color: (c + r) % 2 ? "white" : "black",
        });
    }
}
for (const tile of tiles) {
    ctx.fillStyle = tile.color;
    ctx.fillRect(tile.x, tile.y, tileW, tileH);
}

&lt;canvas id="canvas" width='1000' height='600'&gt;&lt;/canvas&gt;

【讨论】：