网格偏移一

Question

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

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() 函数，然后设置填充和描边。

这将导致每个方块具有 前一个 单元格的颜色。所以不是你的第一个 Pixel 位于第二个正方形，而是第二个 Pixel 是根据第一个 Pixel 的颜色绘制自己。根据最后一个 Pixel.

的颜色，第一个 Pixel 绘图本身也是如此

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

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

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

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

Grid offset by one