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

我用帆布做了一张10*10的桌子。每个细胞随机地被涂成绿色、蓝色或红色。现在，我想检查表中的每个单元格的颜色，如果它与相邻单元格的颜色相同，则对其进行更改。 如何检查每个单元格的颜色

var颜色；
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
功能绘图板（）{
对于（设i=0；i<440；i+=40）{
context.beginPath（）；
context.moveTo（i，0）；
lineTo（i，400）；
stroke（）；
}
对于（设i=0；i<440；i+=40）{
context.beginPath（）；
上下文。移动到（0，i）；
lineTo（400，i）；
stroke（）；
}
对于（设i=0；i<440；i+=40）{//row
对于（设j=0；j<440；j+=40）{//列
让颜色=随机颜色（）；
context.fillStyle=颜色；
fillRect（j，i，40，40）；
}
}
}
绞车（）；
函数randomColor（）{
让colorOptions=[“红色”、“蓝色”、“绿色”]；
让index=Math.floor（Math.random（）*colorOptions.length）；
返回颜色选项[索引]；
}

提供代码后更新 使用代码设置颜色，然后在不存储该信息的情况下绘制。我的建议是重新构造代码，使每个单元格都是一个具有值的对象，如果您想在以后对其进行操作的话。如果你想要一个快速修复，我会索引每个单元格的随机颜色。还有一个选项是从每个单元格中的像素获取颜色值。本文提供的示例：

通常，在进行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对象
• 创建随机设置时，只需将颜色推送到数组中，并将每个单元格的颜色提取到数组中其索引的颜色
• 有一种方法可以在画布上绘制DOM对象，如果这是您的方法，您可以检查“对象样式”属性。可能

  yourCell.style.background

var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
const colorArray=fillArray（）；
功能绘图板（）{
对于（设i=0；i<440；i+=40）{
context.beginPath（）；
context.moveTo（i，0）；
lineTo（i，400）；
stroke（）；
}
对于（设i=0；i<440；i+=40）{
context.beginPath（）；
上下文。移动到（0，i）；
lineTo（400，i）；
stroke（）；
}
对于（设i=0；i<440；i+=40）{//row
对于（设j=0；j<440；j+=40）{//列
context.fillStyle=colorArray[i/4+j/40]；
fillRect（j，i，40，40）；
}
}
}
绞车（）；
函数fillArray（）{
设arr=[]；
对于（设i=0；i<121；i+=1）{
arr.push（randomColor（））；
而（arr[i]==arr[i-1]| | arr[i]==arr[i-10]）{
arr[i]=randomColor（）；
}
}
返回arr；
}
函数randomColor（）{
让colorOptions=[“红色”、“蓝色”、“绿色”]；
让index=Math.floor（Math.random（）*colorOptions.length）；
返回颜色选项[索引]；
}

是的，有什么想法吗。但首先，告诉我们你的想法？你尝试过什么吗？我想使用document.getElementById，但不确定我对javascript的了解程度。我已经在画布上构建了电路板，并对所有单元随机着色，但现在不知道如何检查单元单元，因为它不是JAVA中的二维数组。例如，搜索SO或web非常简单，例如查找：对100个单元使用document.getElementById当然是可能的，但是给他们一个类名，比如“cell”，并使用document.getElementsByClassName（“cell”）会更简洁。现在你得到了一个节点列表，你可以循环检查每个项目的样式。背景我添加了我的代码，但是我是如何将类名添加到每个单元格的？我添加了我的代码。。。不知道我是否理解您如何使用cell.style.background