Проверить цвет ячейки в таблице на холсте
Я построил стол 10 * 10, используя холст. Каждая ячейка случайным образом окрашена в зеленый, синий или красный цвет. Теперь я хочу проверить каждую ячейку в таблице на предмет ее цвета и изменить ее, если она такая же, как и ее сосед. Как проверить цвет каждой ячейки?
var color;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function drawBoard() {
for (let i = 0; i < 440; i += 40) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, 400);
context.stroke();
}
for (let i = 0; i < 440; i += 40) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(400, i);
context.stroke();
}
for (let i = 0; i < 440; i += 40) {//row
for (let j = 0; j < 440; j += 40) {//column
let color = randomColor();
context.fillStyle = color;
context.fillRect(j , i , 40, 40);
}
}
}
drawBoard();
function randomColor() {
let colorOptions = ["RED", "BLUE", "GREEN"];
let index = Math.floor(Math.random() * colorOptions.length);
return colorOptions[index];
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id = "canvas" height = "600" width = "600"></canvas>
<script src = "script.js"></script>
</body>
</html>Я хочу использовать document.getElementById, но не уверен, как это работает, потому что я новичок в javascript. Я уже построил доску на CANVAS и произвольно раскрасил все ячейки, но теперь не знаю, как проверить ячейку, потому что это не двумерный массив, как, например, в JAVA.
Очень просто выполнить поиск в SO или в Интернете и, например, найти: stackoverflow.com/questions/6735470/…
использование document.getElementById для 100 ячеек, безусловно, возможно, но было бы проще дать им имя класса, например "cell", и использовать document.getElementsByClassName ("cell"). Теперь у вас есть список узлов, который можно перебрать, чтобы проверить стиль каждого элемента.
Я добавил свой код, но как я добавил имя класса в каждую ячейку?
Вы не используете элементы DOM, поэтому в данном случае вы бы этого не сделали. В вашем примере вы будете использовать более простой подход с использованием javascript. Я дал ответ, который решает то, что вы пытаетесь сделать, но код был бы намного лучше, если бы его переписывали с учетом конечной цели.
Если ответ удовлетворительный, примите его или объясните, почему он не работает. Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обновление после предоставления кода
С помощью вашего кода вы устанавливаете цвет, а затем рисуете его, не сохраняя эту информацию. Я бы порекомендовал реструктурировать ваш код так, чтобы каждая ячейка представляла собой объект со значениями, если вы хотите впоследствии ими манипулировать. Если вам нужно быстрое исправление, я бы индексировал случайные цвета для каждой ячейки. Еще один вариант - получить значение цвета из пикселя в каждой ячейке. Пример, представленный в этом сообщении: Получить цвет пикселя с холста
Обычно, когда вы создаете цикл for, вы увеличиваете счетчик на 1. С вашим кодом было бы легче работать, если бы вы выполняли цикл от 0 до 9, а не от 0 до 440. Но, используя то, что вы предоставили, вы можете создать массив, подобный приведенному ниже фрагменту .
Что я здесь делаю, так это создаю массив, содержащий 121 (11 на 11) цвет. Затем при рисовании мы используем индекс в массиве для каждого рисунка. Чтобы изменить цвета, все, что вам нужно сделать, это манипулировать массивом.
Согласно вашему исходному сообщению, вы не хотите, чтобы квадраты равнялись его соседу. Я добавил это в настройку массива вместо того, чтобы потом проверять.
while(arr[i] === arr[i -1] || arr[i] === arr[i -10]) {
arr[i] = randomColor();
}
это гарантирует, что цвет не будет помещен в массив, если цвет оставлен сам по себе или сверху. Этот код медленный, поскольку он может запускать функцию randomColor () много раз для каждой ячейки.
Оригинальный ответ
Есть много способов сделать то, что вы описали. В зависимости от того, как вы создали свою таблицу, ответ будет отличаться. Некоторые возможности:
- Каждая ячейка может быть объектом javascript со свойством
color:. - При создании случайной настройки просто поместите цвета в массив и выберите цвет каждой ячейки в соответствии с ее индексом в массиве.
- Есть способ рисовать объекты DOM на холсте, если это ваш подход, вы можете проверить свойство стиля объектов. Вероятно
yourCell.style.background
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
const colorArray = fillArray();
function drawBoard() {
for (let i = 0; i < 440; i += 40) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, 400);
context.stroke();
}
for (let i = 0; i < 440; i += 40) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(400, i);
context.stroke();
}
for (let i = 0; i < 440; i += 40) {//row
for (let j = 0; j < 440; j += 40) {//column
context.fillStyle = colorArray[i/4 + j/40];
context.fillRect(j , i , 40, 40);
}
}
}
drawBoard();
function fillArray() {
let arr = [];
for (let i = 0; i < 121; i += 1) {
arr.push(randomColor());
while(arr[i] === arr[i -1] || arr[i] === arr[i -10]) {
arr[i] = randomColor();
}
}
return arr;
}
function randomColor() {
let colorOptions = ["RED", "BLUE", "GREEN"];
let index = Math.floor(Math.random() * colorOptions.length);
return colorOptions[index];
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id = "canvas" height = "600" width = "600"></canvas>
<script src = "script.js"></script>
</body>
</html>Я добавил свой код ... не уверен, что понимаю вас, как использовать yourCell.style.background
Да любая идея. Но сначала расскажите нам свои идеи? Вы что-нибудь пробовали?