javascript - 网格偏移一

Question

好的，所以我一直在尝试让网格在我的 Canvas 上工作。这是我得到的:

codepen link

for (var j = 0; j < rows; j++) {
    for (var i = 0; i < cols; i++) {
        var pix = new Pixel(i, j);
        grid.push(pix);
    }
}

现在，问题是在网格数组上，索引 0 上的像素实际上是第 2 个，最后一个是第 1 个。我想更改它，但看不到代码中的问题所在。

Answer 1

看看你的 Pixel#draw() 函数:

this.draw = function () {
    rect(this.x, this.y, l, l);
    fill(0);
    stroke(20);
    if (this.on)
        fill(255);
}

逐行阅读这段代码，认真思考它到底在做什么。用一张纸和一支铅笔逐步浏览它，以准确了解发生了什么。

请注意，您首先调用了 rect() 函数，然后设置了填充和描边。

这将使每个方 block 都具有上一个 单元格的颜色。所以不是你的第一个 Pixel 位于第二个方 block ，而是第二个 Pixel 根据第一个 Pixel 的颜色绘制自己>。根据最后一个 Pixel 的颜色绘制的第一个 Pixel 本身也是如此。

要解决您的问题，只需在 调用 rect() 函数之前设置描边和填充。

旁注:您可能还想养成为每个 if 语句使用 { } 大括号的习惯，即使是像这样的一行:

if(this.one){
   fill(255);
}

这不会在您的代码中造成任何问题，但这是一个养成的好习惯。