p5.js | resizeCanvas()函数

在p5.js中，resizeCanvas()函数用于动态更改Canvas的大小。

语法

resizeCanvas(w, h, [noRedraw])

参数

• w: Canvas的新宽度（必填）
• h: Canvas的新高度（必填）
• noRedraw：一个可选的布尔值，表示当Canvas大小更改时是否需要重新绘制（默认值为false）。

返回值

该函数没有返回值。

示例

function setup() {
  createCanvas(400, 400);
}

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

function mousePressed() {
  resizeCanvas(random(200, 600), random(200, 600));
}

在上面的示例中，我们定义了一个Canvas大小为400x400，然后绘制了一个圆形。

当鼠标被点击时，我们使用resizeCanvas()函数动态更改Canvas的大小，让它随机设置为200~600之间的宽度和高度。由于默认情况下noRedraw选项是false，因此Canvas大小更改时会自动重新绘制。

注意事项

• 将Canvas的大小更改为比原来更小的尺寸会导致在Canvas上绘制的内容被剪切。
• 改变Canvas大小会删除Canvas上的所有内容。如果你需要保留Canvas上的内容，则需要手动复制并重新绘制它。
• 如果noRedraw选项设置为true，则Canvas大小更改后不会自动重新绘制。如果你需要显示新的Canvas，你需要手动调用draw()函数。