p5.js: Größe der Canvas-Höhe ändern, wenn div die Höhe ändert

Question

Ich versuche, die Leinwand mit p5.js zusammen mit einem div zu skalieren, in dem es sich befindet, wenn man auf eine Schaltfläche klickt, die dieses div vergrößert. Ich brauche die Leinwand nicht neu laden, sondern brauche sie nur, um zusätzliche Höhe hinzuzufügen. Gibt es einen Weg, es zu tun? Ich habe versucht, die Leinwand Breite 100% und Höhe: Auto, aber es funktioniert nicht. Bitte, sehen Sie den Code unten:

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

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

Scripts:

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

Sie die resizeCanvas() Funktion für diese verwenden können. Weitere Informationen finden Sie unter the reference.

Hier ist ein Beispiel, das die Leinwand ändert die Größe der Bildschirmbreite und Höhe entsprechen:

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

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

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

Aber man könnte genauso gut die Breite und Höhe des div bekommen und die Größe der Leinwand zu, dass festgelegt.