p5.j​​s：当div改变高度时调整画布高度

Question

我试图让p5.js的画布与div一起调整大小，当点击一个扩展这个div的按钮给它增加一个高度时。我不需要画布重新加载，而只需要添加一些额外的高度。有办法吗？我尝试将画布宽度设置为100％，将高度设置为auto：但它不起作用。请看下面的代码：

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

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

脚本：

function setup() {
    var myCanvas = createCanvas(498, 598);
    myCanvas.parent('canvas');
 }

$( "#extend-canvas" ).click(function() {
    var canvasHeight = $(".canvas-wrapper").height();
    $(".canvas-wrapper").height(canvasHeight + 300);
});

CSS：

.canvas-wrapper {
    margin: 0 auto;
    background: #fff;
    width: 500px;
    height: 600px;
    position: relative;
}

#canvas canvas {
    width: 100% !important;
    height: auto !important;
}

Answer 1

您可以使用resizeCanvas()功能。更多信息可以在the reference找到。

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

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

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

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

但你可以很容易地得到div的宽度和高度，并将画布大小设置为。