html代碼中p5.js庫canvas的結構

Question

這是我的 HTML 代碼。 在腳本標簽中，我定義了 canvas 寬度和高度，但在 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 的 function

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的寬度，使屏幕的寬度和高度可調，但由於canvas的高度和寬度沒有變化，所以無法得到結果。 js中的canvas尺寸為1080x1920。

Answer 1

您可以進行兩項更改來解決此問題。 第一個是將正確的選擇器添加到您的樣式表。 您當前正在為 class .AS 設置.AS ，但該元素使用一個 ID。 其次，canvas 的樣式針對 canvas 元素，但 html 中沒有，只有一個 div。 這應該工作：

<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">

   <style>

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

  </style>


</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>

Answer 2

你好，希望你玩得開心，

這些是我的項目信息，所以對於 ArtmySketch.js 文件，我把它放在 html 的腳本旁邊，到處都是 p，然后再調用一些 p5 function。讓我問你有多遠......祝你好運

 <head>
   <stlye>
   </style>
 </head>
 <body>
   <main>
      <div id="colorCanvas" class = "container">
        <div id = "AS">
        </div>
      </div>
      <div>
        <img src="./586.png">
      </div>
   </main>
   <script>
        var sketchPink = function(p) {
        p.setup = function() {
          const myPinkCanvas = p.createCanvas(p.windowWidth,p.windowHeight);
          myPinkCanvas.parent("AS");
        }
   </script>
 </body>

在里面放置 css

      canvas {
        display: block;
      }

      #colorCanvas {
        margin: 0 auto;
      }

在調整 window 的大小時，還有類似 p.windowResize 的東西。謝謝

html代碼中p5.js庫canvas的結構

問題描述

2 個解決方案

解決方案1
0 2023-01-19 06:29:06

解決方案2
-1 2023-01-19 17:03:09

html代碼中p5.js庫canvas的結構

問題描述

2 個解決方案

解決方案1 0 2023-01-19 06:29:06

解決方案2 -1 2023-01-19 17:03:09

解決方案1
0 2023-01-19 06:29:06

解決方案2
-1 2023-01-19 17:03:09