将 p5 canvas 设置为父级的最大宽度 div

Question

如何获取父项的宽度 div？

我需要 canvas 达到最大宽度。但是 div 应该仍然在我的 CSS 文件设置的边界内。

换句话说：如何在 divs 边界内获得可能的最大宽度？

所以：

function setup() {
    //somehow get the width of the div and set the canvas to that
    const myCanvas = createCanvas(400, 400);
    myCanvas.parent('canvasDiv');
}

function draw() {
    background(0);
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Default Page Title</title>
    <link rel="stylesheet" href="blogPost.css">
    <script type="text/javascript" src="../p5.js"></script>
    <script type="text/javascript" src="sketch.js"></script>
</head>
<body>


<div id="containerHeader">
    <h1>Default Page header</h1>
</div>
<div id="canvasDiv"></div>
<div id="container">
    <p>default description</p>
</div>
</body>
</html>

最后是我的 CSS:

#canvasDiv {
    margin: 0;
    padding: 0;
}

Answer 1

要获取我的父项 div 的宽度，您可以为 canvasDiv 添加 CSS 高度和宽度。如果你想让那个容器从父级获取高度和宽度，你可以写 height: inherit; 和 width: inherit;

将 p5 canvas 设置为父级的最大宽度 div

Set p5 canvas to maximum width of parent div

html

javascript

css

p5.js