Question

我用画布搭建了一个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>

Answer 1

提供代码后更新

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

通常，在进行for循环时，会将计数增加1。如果从0循环到9，而不是从0到440，则代码将更易于使用。但是使用您提供的内容，您可以创建一个数组下面的代码段。

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

根据您的原始帖子，您不希望正方形等于其邻居。我将其添加到数组的设置中，而不是随后进行检查。

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

这可以确保如果颜色本身是左侧或顶部本身，则不会将任何颜色压入数组。该代码很慢，因为它可以为每个单元多次运行randomColor（）函数。

原始答案

有很多方法可以完成您描述的操作。根据您创建表的方式，答案将有所不同。一些可能性：

每个单元格可以是具有color:属性的javascript对象。
创建随机设置时，只需将颜色推送到数组中，然后将每个单元格的颜色提取为其数组中索引的颜色即可。
有一种方法可以在画布上绘制DOM对象，如果您采用这种方法，则可以检查对象的style属性。可能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>

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

1 个答案:

提供代码后更新

原始答案