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

Question

我一直在嘗試在div內設置p5.js畫布，並在jekyll帖子中使用divs寬度控制畫布的寬度。 在markdown文件中，我正在構造一個div，該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），但是隨后打印出width變量，它是1244px。 在Chrome檢查器中，p5畫布的寬度最終為width = 100px。

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

該值未傳遞到p5畫布上，我不知道為什么。 順便說一句，我沒有使用任何CSS來設置myCanvas或canvas元素的樣式。

提前致謝。

Answer 1

您需要在setup()捕獲父元素信息

setup()的默認寬度和高度為100x100。 如果未在setup（）中定義width，則它將被默認值覆蓋。 從文檔中：

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

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

我在這張圖中測試並證明了這一點：

以下是正確的代碼，應使用以下代碼替換setup（）函數：

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