javascript - p5:调整 Canvas 大小，以固定的起始宽度/高度？

我正在玩使用p5和tensorflow。我创建了一个“面部过滤器”，使用 tensorflow 跟踪 Nose 和耳朵，并将图像附加到这些位置。例如，如果我的脸部过滤器是“ clown ”， Nose 将变成红色 Nose ，耳朵将变成 clown 耳朵。
一切正常，但是现在我试图使 Canvas 响应。
我的 Canvas 尺寸为createCanvas(1200, 768)，它在CSS中居中。
如何根据浏览器的宽度使 Canvas 响应？我只是不确定如何在windowResized函数中设置代码。

function windowResized(){
  resizeCanvas(width?, height?);
}

感谢我能得到的任何投入。

最佳答案

p5.j​​s提供系统变量 windowWidth 和 windowHeight ， width 和 height 。 width和height存储 Canvas 的当前大小，而windowWidth和windowHeight存储内部窗口的宽度。
在 windowWidth 中使用windowHeight和windowResized()调整 Canvas 大小:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

创建 Canvas 时，也可以使用这些变量:

function setup() {
  createCanvas(windowWidth, windowHeight);
}