时间戳

首页 > 解决方案 > 检查画布表格中的单元格颜色

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

问题描述

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

标签： javascripthtmlcanvas

解决方案

提供代码后更新

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

通常，当您进行 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 对象，如果这是您的方法，您可以检查对象样式属性。可能的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>

推荐阅读