p5.js | resizeCanvas()函数

resizeCanvas()函数用于将画布的大小调整为作为参数给出的高度和宽度。除非可选的“noRedraw”参数设置为 true，否则在调整大小后立即重新绘制画布。

句法：

resizeCanvas(w, h, [noRedraw])

参数：此函数接受三个参数，如上所述，如下所述：

• w：这是一个数字，表示新画布的宽度。
• h：是一个代表新画布高度的数字。
• noRedraw：它是一个布尔值，指定在调整大小时是否立即重绘画布。

下面的例子说明了 p5.js 中的resizeCanvas()函数：

示例 1：在此示例中，我们固定了增加的大小。

function setup() {
  createCanvas(200, 200);
  textSize(16);
  
  rect(0, 0, height, width);
  background('green');
  text("This is the canvas area", 20, 80);
  text("Canvas height: " + height, 25, 100);
  text("Canvas width: " + width, 25, 120);
}
  
function mouseClicked() {
  resizeCanvas(300, 300, true);
  
  rect(0, 0, height, width);
  background('green');
  text("This is the canvas area", 50, 130);
  text("Canvas height: " + height, 50, 150);
  text("Canvas width: " + width, 50, 170);
}

输出：

示例 2：在此示例中，大小取决于点击位置。

function setup() {
  createCanvas(200, 200);
  textSize(16);
  
  rect(0, 0, height, width);
  background('green');
  text("Press anywhere to resize", 10, 20);
  text("Canvas height: " + height, 10, 40);
  text("Canvas width: " + width, 10, 60);
}
  
function mouseClicked(event) {
  // resize canvas to the
  resizeCanvas(event.x, event.y);
  
  rect(0, 0, height, width);
  background('green');
  text("Press anywhere to resize", 10, 20);
  text("Canvas height: " + height, 10, 40);
  text("Canvas width: " + width, 10, 60);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/resizeCanvas