javascript - 如何使用父 div 属性设置 Canvas 宽度/高度

Question

我一直在尝试在 div 中设置 p5.js Canvas ，并在 jekyll 帖子中使用 div 宽度来控制 Canvas 宽度。在 Markdown 文件中，我正在构建一个我知道位于帖子顶部的 div。

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

在 javascript 中，我将 p5.js Canvas 分配给了 div。我试图获得 parent 的 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 Canvas 最终宽度为 100px。

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

该值没有传递到 p5 Canvas ，我不知道为什么。顺便说一句，我没有使用任何 CSS 来设置 myCanvas 或 canvas 元素的样式。

提前致谢。

Answer 1

您需要在 setup() 中捕获父元素信息
setup() 的默认宽度和高度是 100x100。如果在 setup() 中没有定义宽度，它将被默认值覆盖。从文档中:

The system variables width and height are set by the parameters passed to this function. If createCanvas() is not used, the window will be given a default size of 100x100 pixels.

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