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

Question

我正在尝试使用p5.js将画布调整为一个div，当它点击一个按钮时，它会延伸这个div给它增加高度。我不需要画布重新加载，而只需要添加一些额外的高度。有办法吗？我尝试使画布宽度100％和高度：自动，但它不起作用。请看下面的代码：

<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的宽度和高度，并将画布大小设置为。