时间戳

首页 > 解决方案 > 将 p5 画布设置为父 div 的最大宽度

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

问题描述

如何获得父 div 的宽度？

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

换句话说：如何在仍处于 div 边界内的同时获得最大宽度？

所以：

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

标签： javascripthtmlcssp5.js

解决方案

要获取我的父 div 的宽度，您可以为 canvasDiv 添加 CSS 高度和宽度。如果您希望该容器从父级获取高度和宽度，则可以编写height: inherit;和width: inherit;

推荐阅读