检查画布表格中的单元格颜色答案

【问题标题】：check cell color in table in canvas检查画布表格中的单元格颜色
【发布时间】：2019-01-05 06:09:32
【问题描述】：

我使用画布构建了一个 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/…
对 100 个单元格使用 document.getElementById 当然是可能的，但是给它们一个类名，如“cell”并使用 document.getElementsByClassName("cell") 会更简洁。现在你得到一个节点列表，你可以循环检查每个项目 style.background
我添加了我的代码，但是我如何将类名添加到每个单元格？

标签： javascript html canvas

【解决方案1】：

提供代码后更新

使用您的代码设置颜色，然后在不存储该信息的情况下绘制它。我的建议是重组你的代码，以便每个单元格都是一个带有值的对象，如果你想在之后操作它们。如果您想要快速修复，我会为每个单元格索引随机颜色。另一种选择是从每个单元格中的像素获取颜色值。这篇文章中提供的示例：Get pixel color from canvas

通常，当您创建一个 for 循环时，您会将计数增加 1。如果您从 0 循环到 9 而不是 0 到 440，您的代码会更容易使用。但是使用您提供的内容，您可以创建一个类似的数组下面的sn-p。

我在这里所做的是创建一个包含 121（11 x 11）种颜色的数组。然后在绘图时，我们在数组中为每个绘图使用一个索引。要修改颜色，您只需操作数组即可。

根据您的原始帖子，您不希望任何正方形与其邻居相等。我将此添加到数组的设置中，而不是事后检查。

while(arr[i] === arr[i -1] || arr[i] === arr[i -10]) {
arr[i] = randomColor();
}

如果颜色在自身或自身顶部，则确保没有颜色被推送到数组。这段代码很慢，因为它可以为每个单元格多次运行 randomColor() 函数。

原答案

有很多方法可以做你描述的事情。根据您创建表格的方式，答案会有所不同。一些可能性：

每个单元格都可以是一个带有color: 属性的javascript 对象。
创建随机设置时，只需将颜色推送到数组中，然后将每个单元格的颜色提取到数组中其索引的颜色即可。
有一种方法可以在画布上绘制 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