html代码中p5.js库的画布结构答案

【问题标题】：Structure of canvas of p5.js library in html codehtml代码中p5.js库的画布结构
【发布时间】：2023-01-19 14:29:06
【问题描述】：

这是我的 HTML 代码。在脚本标签中，我定义了画布的宽度和高度，但在 js 或我的 chrome 页面上，宽度没有变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="../p5.min.js"></script>
  <!-- <script text="text/javascript" src="AntSmasher.js"></script> -->

  <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/planck@latest/dist/planck.min.js"></script> -->
  <script src="https://p5play.org/v3/p5.play.js"></script>

  <script text="text/javascript" src="Insect.js"></script>
  

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body style="background-color:black;">
  <div id="AS"></div>
  <script text="text/javascript" src="AntSmasher.js">
    document.getElementById("AS").style.width=Canvas.width ;
      document.getElementById("AS").style.height=Canvas.height ;
  </script>
</body>
</html>

这是定义画布功能的CSS代码

canvas{
  padding: 0;
  margin: auto;
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  aspect-ratio: 9/16;
}
.AS{
  height : 100vh;
  aspect-ratio: 9/16;
}

我尝试了 getElementById 方法在 html 中定义 js 的宽度以使宽度和高度屏幕可调，但由于画布高度和宽度没有改变而无法获得结果。 js 中的画布尺寸为 1080x1920。

【问题讨论】：

标签： javascript html css html5-canvas p5.js

【解决方案1】：

您可以进行两项更改来解决此问题。第一个是将正确的选择器添加到您的样式表。您当前正在为 .AS 类设置样式，但该元素使用了一个 id。其次，画布的样式针对画布元素，但在 html 中没有，只有一个 div。这应该有效：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="../p5.min.js"></script>
  <!-- <script text="text/javascript" src="AntSmasher.js"></script> -->

  <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/planck@latest/dist/planck.min.js"></script> -->
  <script src="https://p5play.org/v3/p5.play.js"></script>

  <script text="text/javascript" src="Insect.js"></script>
  

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body style="background-color:black;">
  <canvas id="AS"></canvas>
  <script text="text/javascript" src="AntSmasher.js">
    document.getElementById("AS").style.width=Canvas.width ;
      document.getElementById("AS").style.height=Canvas.height ;
  </script>
</body>
</html>

canvas{
  padding: 0;
  margin: auto;
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  aspect-ratio: 9/16;
}
#AS{
  height : 100vh;
  aspect-ratio: 9/16;
}

【讨论】：