当 window 调整大小时，如何为 p5.js 更新 CreateCanvas() 中的值？

Question

我正在尝试另一个完全由 JavaScript 使用 p5.js 库制作的编码项目 - 我真的不知道如何使用 HTML。无论如何，在 p5.js 中，有一个 createCanvas([width], [length]) 函数可以创建一个“canvas”来进行排序。我试图在 window 调整大小时使 canvas 可调（例如按 F11，使 window 仅覆盖屏幕的一半，等等）但我的问题是我使setup() 函数中的 canvas，只有运行一次。有没有办法做以下三件事之一：

在不影响其他任何东西的情况下多次使用 canvas 运行，有点像有一个 clear() 函数，或者像在开头放置一个 background() 函数draw() 循环（换句话说，如果我将 createCanvas() 函数从 setup() 移动到 draw()，它会改变什么吗？）

检测屏幕何时调整大小并在发生这种情况时制作新的canvas

检测整个屏幕尺寸，以像素为单位，然后制作一个canvas那么大，而只使用window.innerLength或window.innerHeight只使用[=37=的一部分] 正在显示

或者我这样做完全错误，我是否需要采用不同的方法来调整屏幕大小？我是编码这方面的新手：P

Answer 1

实际上，在 p5.js 中有一个 windowResized() 事件和一个 resizeCanvas() 方法可以根据您的 canvas 调整大小：

窗口宽度
窗口高度

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

function draw() { 
  background(80);
  
  ellipse(width/2 , height/2 ,100,100);
}

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

运行代码在这里：https://editor.p5js.org/aferriss/sketches/rJAwGb_AW

当 window 调整大小时，如何为 p5.js 更新 CreateCanvas() 中的值？

How do I update the values in CreateCanvas() for p5.js as the window resizes?

javascript

resize

canvas

window-resize

p5.js