将p5画布设置为父div的最大宽度



如何获取父div的宽度?

我需要画布的最大宽度。但是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;
}

要获得父div的宽度,可以为canvasDiv添加CSS高度和宽度。然后,如果你想让容器从父容器获得高度和宽度,你可以写height: inherit;width: inherit;

最新更新