javascript - p5.j​​s中带有矩形的网格中的意外边框模式

Question

我正在尝试在 p5js 中生成一个类似方形网格的图案，该图案尽可能覆盖浏览器窗口。我在实例模式下使用 p5js，因为我在 react 中使用它，我在 Win10 中使用 chrome。这是我的代码：-

var size = 15;
var height = window.innerHeight;
var width = window.innerWidth;

Sketch = (p) => {
        p.setup = () => {
            p.createCanvas(width,height)
            p.frameRate(60);
            p.noLoop();
        } 

        p.draw = () => {
            p.background(250);
            p.stroke(0);
            p.noFill();
            for(let i =0;i*size +size <width;i++) {
                for(let j=0;j*size +size<height;j++) {
                    p.rect(i*size,j*size,size,size);
                }
            }
        }

        p.mouseDragged = (e) => {
            p.stroke(0);
            let x = Math.floor(e.clientY/size);
            let y = Math.floor(e.clientX/size);
            p.fill(220);
            p.rect(y*size,x*size,size,size);
                
        }
}

我调用 p.noLoop() 所以它不会每次都刷新，我还有一个按钮调用 p.redraw() 将所有内容更改为默认值。这是我得到的网格和行为：

网格的边界大小不一，先减小后增大再减小，依此类推。此外，我拖动鼠标的区域周围有更奇怪的边框（当我单击其他地方时会解决这个问题，所以这是 GPU 锯齿渲染问题吗？）。如何在整个屏幕上创建具有相同边框的网格？

编辑：当我渲染一个盒子时，它有问题。左边和上边界都很好。然而，右边界和下边界有一个额外的灰色边界像素，这似乎是问题所在。我该如何解决？

另外，strokeWeight 和 rect 在 p5js 中是如何工作的？如果我执行 strokeWeight(10) 和 rect(3,2,50,50)，是否会创建一个 50 x 50 的矩形，周围有 10 个像素的边框，或者边框包含在矩形大小中？

标签： javascriptreactjsgoogle-chromeprocessingp5.js