时间戳

首页 > 解决方案 > 在画布中一一着色矩形

html - 在画布中一一着色矩形

问题描述

我有画布，上面绘制了许多矩形，以便制作一个网格。我想要的是在网格中为每个矩形一个接一个上色，直到每个矩形都染成黑色，然后再次选择其中的几个以同样的方式一个接一个地染成白色。我尝试了几种使用“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>

标签： htmlfor-loopcanvassettimeoutjss

解决方案

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

余数运算符

运算符%返回除法后的余数。例如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。等等。

%运算符的优先级高于加法运算符+，因此我们需要将分组运算符放在加法周围。( )

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

三元运算符

我们可以使用三元运算符最简单地做到这一点?。例如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);
}
<canvas id="canvas" width='1000' height='600'></canvas>

推荐阅读