如何使用 parent div 属性设置 canvas 宽度/高度

Question

我一直在尝试在div里面设置一个p5.jscanvas，用divs的宽度来控制canvas的宽度，在一个 jekyll post 中。在降价文件中，我正在构建一个 div，我知道它位于 post 的顶部。

<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 最终变为 width=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。如果 width 没有在 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");
}

如何使用 parent div 属性设置 canvas 宽度/高度

How to set canvas width / height using parent divs attributes

javascript

p5.js