Цветной прямоугольник один за другим на холсте

У меня есть холст, на котором нарисовано несколько прямоугольников, чтобы создать сетку. Я хочу раскрасить каждый прямоугольник один за другим в сетке, пока каждый из них не будет окрашен в черный цвет, а затем снова выбрать несколько из них, чтобы покрасить их в белый цвет таким же образом один за другим. Я пробовал несколько методов, используя цикл 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>


canvas html for-loop jss settimeout
person Zaid Khan    schedule 26.08.2020    source источник
comment
У вас синтаксическая ошибка. Вы пропустили { после этой строки for (c = 0; c < tileColCount; c++)   -  person Dan Mullin    schedule 26.08.2020
comment
Извините, это, должно быть, произошло, когда я вставлял код, который написал в своем редакторе. Но проблема не в том, что он раскрашивает прямоугольники один за другим с помощью цикла for.   -  person Zaid Khan    schedule 26.08.2020

Ответы (2)


arrow_upward
0
arrow_downward

Обновите код рендеринга, чтобы использовать метод fillRect из контекста 2d.

Замените это:

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);
person Dan Mullin    schedule 26.08.2020

arrow_upward
0
arrow_downward

Не понятно, что вы хотите. Я предполагаю, что вы хотите шахматную доску. Следующее сделает это.

Оператор 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. и так далее.

Оператор % имеет более высокий приоритет, чем оператор дополнение оператор + поэтому нам нужно поместить группировка операторов ( ) вокруг добавления.

Например, 3 + 1 % 2 будет равно 4. Сначала выполняется 1 % 2, затем добавляется 3, а (3 + 1) % 2 будет равно 0. Сначала выполняется (3 + 1), затем выполняется остаток

Оператор 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);
}
<canvas id="canvas" width='1000' height='600'></canvas>

person Blindman67    schedule 27.08.2020