如何使用父div屬性設置畫布寬度/高度

Question

我一直試圖在div中設置p5.js畫布，並使用divs寬度來控制畫布寬度，在jekyll文章中。在markdown文件中，我構建了一個我知道的div，位於帖子的頂部。

<div id="myCanvas"</div> 
<script src="/js/p5Sketches/firstP5Sketch.js" type="text/javascript"></script> 

在javascript中我已將p5.js畫布分配給div。我試圖得到父母的div clientWidth，但我得到了一些非常奇怪的輸出。

var canvasDiv = document.getElementById('myCanvas'); 
var width = canvasDiv.clientWidth; 

function setup() { 
    var sketchCanvas = createCanvas(width,450); 
    sketchCanvas.parent("myCanvas"); 
} 

function draw() { 
    if (mouseIsPressed){ 
    fill(0); 
    } else { 
    fill(255); 
    } 
    ellipse(mouseX, mouseY, 40, 40); 

    if (keyIsPressed == true){ 
    clear(); 
    } 
} 

function windowResized() { 
    resizeCanvas(width,450); 
} 

當我打印出canvasDiv屬性我得到正確clientWidth值（844px），但是然後打印出寬度可變的，並且它是1244px。在鉻檢查器中，p5畫布的寬度= 100px。

<canvas id="" width="200" height="900" style="width: 100px !important; height: 450px !important;" class=""></canvas> 

該值沒有傳遞到p5畫布上，我找不出原因。另外，我沒有使用任何CSS來設計myCanvas或canvas元素。

在此先感謝。

Answer 1

您需要內setup()

默認寬度和高度捕捉父元素信息setup()是100×100。如果在setup（）中沒有定義寬度，它將被默認值覆蓋。從文檔：

系統變量的寬度和高度由傳遞給此函數的參數 設置。如果未使用createCanvas（），則默認大小爲100x100像素的窗口將爲 。

https://p5js.org/reference/#/p5/createCanvas

其中我測試，在此圖像中證明：

下面是正確的代碼，你應該更換你的設置（）函數：

function setup() { 
    var canvasDiv = document.getElementById('myCanvas'); 
    var width = canvasDiv.offsetWidth; 
    var sketchCanvas = createCanvas(width,450); 
    console.log(sketchCanvas); 
    sketchCanvas.parent("myCanvas"); 
}