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

Question

我正在使用 rect() 在画布上绘制 17×17 2D 网格。但每当我增加单元格数量（例如 20×20）时，画布上的网格就会缩小。一开始我以为是浮点精度损失问题。然而事实似乎并非如此。与屏幕的密度或像素有关吗？因为它在不同尺寸的屏幕上发生的情况不同。这是我在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);

    }

}