Javascript div中画布的html代码正确吗？_Javascript_Html_Css

Javascript div中画布的html代码正确吗？

javascript html css

Javascript div中画布的html代码正确吗？,javascript,html,css,Javascript,Html,Css,我正试图把画布放在一个div中，这样我就可以隐藏它，用一个按钮显示它，并可以调整它的大小，但目前它没有显示出来。。。这很奇怪。我的代码正确吗 <div id="blob"></div> <script src="sketch.js"></script> <script src="blob.js"></script> </div> 这

我正试图把画布放在一个div中，这样我就可以隐藏它，用一个按钮显示它，并可以调整它的大小，但目前它没有显示出来。。。这很奇怪。我的代码正确吗

<div id="blob"></div>
    <script src="sketch.js"></script>
    <script src="blob.js"></script>
  </div>

这只导入一个javascript文件。除非javascript创建一个画布元素并运行它，否则不会显示任何内容。

我看不到画布元素。@bhojendraauniya画布是在sketch.js中创建的，我看不到您调用函数的任何地方。我认为建议将所有脚本标记放在HTML末尾附近。如果sketch.js正在执行类似document.createElement的操作，则只需运行javascript即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
   <title>Quiz App</title>
</head>
<body>
  </div>
  <div class="container">
    <div class="container2">
      <img name="slide">
    </div> 
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="btn">Answer 1</button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
      </div> 
    </div>
    <div class="container1">
      <div id="startmsgcontainer" class="hide"></div>
        <div id="startmsg">Adventure Into The Human Immune System</div>
        </div>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start!</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
      <button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
      <button id="try-btn" class="try-btn btn hide">Try again!</button>
    </div>
  </div> 
  <div class="wrapper">
      <img src="img/uni.png" alt="image">
  </div>
  </div>
  <div id="blob"></div>
    <script src="sketch.js"></script>
    <script src="blob.js"></script>
  </div>
  <div id="particles-js"></div>
  <script src="particles.js"></script>
  <script src="app.js"></script>
  <script src="slide.js"></script>
</body>
</html>

var blob;

var blobs = [];
var zoom = 1;

function setup() {
  createCanvas(600, 600);
  blob = new Blob(0, 0, 64);
  for (var i = 0; i < 200; i++) {
    var x = random(-width, width);
    var y = random(-height, height);
    blobs[i] = new Blob(x, y, 16);
  }
}

function draw() {
  background(0);

  translate(width / 2, height / 2);
  var newzoom = 64 / blob.r;
  zoom = lerp(zoom, newzoom, 0.1);
  scale(zoom);
  translate(-blob.pos.x, -blob.pos.y);

  for (var i = blobs.length - 1; i >= 0; i--) {
    blobs[i].show();
    if (blob.eats(blobs[i])) {
      blobs.splice(i, 1);
    }
  }

  blob.show();
  blob.update();
}

<script src="sketch.js"></script>