p5.js | windowResized() 函数

windowResized() 函数是 p5.js 中的一个特殊函数，用于处理浏览器窗口大小变化时的事件。当浏览器窗口大小发生变化时，p5.js 将自动调用 windowResized() 函数，以便你可以在程序中处理窗口变化事件。

语法

function windowResized() {
  // TODO
}

描述

当浏览器窗口大小变化时，windowResized() 函数将被调用。可以在该函数中设置新的画布大小或重新计算对象的位置。

**注意：**如果你使用 resizeCanvas() 函数调整画布大小，canvas 元素的 id 也将被更改。如果你使用类似于 jQuery 的库来操作画布元素，需要注意 id 属性是否已经更改。

示例

下面的示例演示了如何使用 windowResized() 函数重新计算根据浏览器窗口大小调整的对象的位置。

let x, y;

function setup() {
  createCanvas(400, 400);
  x = width / 2;
  y = height / 2;
}

function draw() {
  background(220);
  rect(x, y, 50, 50);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  x = windowWidth / 2;
  y = windowHeight / 2;
}

**注意：**由于 rect() 函数的位置参数是指矩形左上角的位置，这里需要根据矩形宽度和高度调整位置。

参考链接

• p5.js 参考手册：windowResized()