p5.js : div가 높이를 변경할 때 캔버스 높이의 크기 조정

Question

이 div를 확장하는 버튼을 클릭 할 때 div가있는 div와 함께 크기를 조정하여 p5.js 크기로 캔버스를 만들려고합니다. 다시로드 할 캔버스가 필요하지 않으며 대신 추가 높이를 추가해야합니다. 그것을 할 수있는 방법이 있습니까? 나는 캔버스 너비를 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); 
} 

을하지만 당신은 쉽게 사업부의 폭과 높이를받을 수 있도록 캔버스 크기를 설정할 수 있습니다.