如何在 p5JS 中使用 div.appendChild(canvas)？

Question

你好，有一个简单的脚本，我在 canvas 中间画了一个圆圈！我想要做的是在 DOM.

的特定点添加 canvas

这是我的代码，我尝试在 ID 为 canvas 的 div 中添加 canvas 而不是脚本所在的位置！:

function setup() {
  
  //REMOVE p5JS default canvas:
  //var p5Canvas = document.getElementById("defaultCanvas0");
  //p5Canvas.remove(); //Remove DOM element 

  //CREATE NEW CANVAS:
  //var canvas = createCanvas(400,400);
  var canvas = document.createElement("canvas");
  canvas.id = "myCanvas";
  canvas.width = "400";
  canvas.height = "400";
  var div = document.getElementById("test");
  div.appendChild(canvas);
}

function draw() {
  background(220);
  ellipse(width/2-25,height/2-25,50,50);
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <h1>hello</h1>
    canvas goes here...
    
    <div id="test"></div>
    
    <br><br>
    after canvas
    <script src="sketch.js"></script>
  </body>
</html>

但是如果你运行上面的代码你会发现下面的错误：

Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at setup (js:41)
    at p5._setup (p5.js:51363)
    at p5._start (p5.js:51286)
    at new p5 (p5.js:51639)
    at _globalInit (p5.js:50603)

Answer 1

我查看了 p5js 文档并了解了如何操作。查看设置以了解更改。

function setup() {
  const canvas = createCanvas(400, 400);
  canvas.parent("test")
  canvas.style("display", "block")
}

function draw() {
  background(220);
  ellipse(width / 2 - 25, height / 2 - 25, 50, 50);
}

html,
body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>
  <h1>hello</h1>
  canvas goes here...

  <div id="test"></div>

  <br><br> after canvas
  <script src="sketch.js"></script>
</body>

</html>

如何在 p5JS 中使用 div.appendChild(canvas)？

How to use div.appendChild(canvas) in p5JS?

javascript

canvas

p5.js