Javascript p5.js：当div更改高度时调整画布高度

我试图使带有p5.js的画布与一个div一起调整大小，当单击一个按钮扩展这个div时，这个div就位于其中，并赋予它额外的高度。我不需要重新加载画布，而是需要它来增加一些额外的高度。有办法吗？我试着使画布的宽度为100%，高度为：自动，但不起作用。请参阅下面的代码：

<div class="canvas-wrapper">
    <div id="canvas"></div>
</div>

<button type="button" class="button" id="extend-canvas">Extend</button>

CSS:

---

您可以为此使用

resizeCanvas（）

函数。更多信息可在中找到

下面是一个调整画布大小以匹配屏幕宽度和高度的示例：

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

function draw() {
  background(0, 100, 200);
}

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

---

但是，您可以同样轻松地获得div的宽度和高度，并将画布大小设置为该值。

您可以使用

resizeCanvas（）

函数进行此操作。更多信息可在中找到

下面是一个调整画布大小以匹配屏幕宽度和高度的示例：

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

function draw() {
  background(0, 100, 200);
}

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

---

但是，您可以同样轻松地获得div的宽度和高度，并将画布大小设置为该值。

使用c.size（宽度-10，高度-10）调整大小；（您必须加载p5.dom.js加载项才能使用size方法。）这是可行的，但画布会重新加载并变为空白，我添加到其中的所有信息（我用鼠标画了一些线）都会消失。使用c.size（宽度-10，高度-10）调整大小；（您必须加载p5.dom.js加载项才能使用size方法。）这是可行的，但画布会重新加载并变为空白，我添加到其中的所有信息（我用鼠标画了一些线）都会消失。@Kaori解决方法之一是首先将所有内容都绘制到缓冲区（您的朋友是

createGraphics（）

函数），调整画布大小，然后将缓冲区拉回到画布上。这样做有效，但画布会重新加载并变为空白，我添加到画布上的所有信息（我用鼠标画了一些线）都会消失。@Kaori的一种解决方法是首先将所有内容都拉回到缓冲区（函数是你的朋友，

createGraphics（）

调整画布的大小，然后将缓冲区拉回到画布上。这样做有效，但画布会重新加载并变为空白，我添加到画布上的所有信息（我用鼠标画了几行）都会消失。

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

function draw() {
  background(0, 100, 200);
}

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