如何使用父divs属性

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。在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和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");
}