processing/p5.js — 每当我增加单元格数量时，二维网格就会缩小

Question

我正在使用 rect() 在 canvas 上绘制 17×17 二维网格。但是每当我增加单元格的数量（例如 20×20）时，canvas 上的网格就会缩小。一开始以为是浮点数精度损失问题。然而，似乎并非如此。屏幕的密度或像素是否与它有关？因为它在不同尺寸的屏幕上发生的情况不同。

这是我在 draw() 中的代码：

let size = width / 17;
for (let x = 0; x < size; x++) {
    for (let y = 0; y < size; y++) {
        rect(x * size, y * size, size, size);
    }
}

19×19 20×20

Answer 1

你必须从 0 迭代到单元格数，而不是从 0 迭代到 size。 size是单个单元格的大小，不是单元格的个数：

let no_of_cells = 20;
let size = width / no_of_cells;
for (let x = 0; x < no_of_cells; x++) {
    for (let y = 0; y < no_of_cells; y++) {
        rect(x * size, y * size, size, size);
    }
}

processing/p5.js — 每当我增加单元格数量时，二维网格就会缩小

processing/p5.js — 2D grid is shrinking whenever I increase the number of cells

javascript

processing

p5.js