P5 创建 <main></main>，我该如何防止这种情况发生？

Question

每次执行我的 p5 脚本时，它都会将一个空的主标记放入正文中。

可能是我设置的原因（但我不这么认为）：

function setup() {
  let canv = createCanvas(400, 400), // TODO https://p5js.org/reference/#p5.Element/parent
      mainFrame = createElement('main'),
      mainDiv = createDiv();
  mainDiv.parent(mainFrame);
  canv.parent(mainDiv);
  .
  .
  .
}

结果如下：

<body>
  <main></main>
  <main>
    <div>
      <canvas id="defaultCanvas0" class="p5Canvas" width="400" height="400" style="width: 400px; height: 400px;"></canvas>
    </div>
  </main>
  .
  .
  .
</body>

有没有类似preventDefault()的东西？

Answer 1

此行：mainFrame = createElement('main') 创建一个标签 main 并将其添加到 DOM。这就是您看到的添加到 DOM.

中的内容

您可以简单地将您发布的所有代码替换为：

function setup(){
    let canvas = createCanvas(400,400);
}

就是这样！其余代码只做您不希望它做的事情。如果您想将 canvas 放在另一个元素中，只需将父元素的 id 作为参数传递给 canvas.parent()

例如： HTML:

<div id = "canvas-container"></div>

JavaScript:

function setup(){
    let canvas = createCanvas(400,400);
    canvas.parent("canvas-container");
}

Answer 2

在将其设置为另一个之前保留对前一个容器的引用，稍后删除前一个容器。

function setup() {
  let mainFrame = createElement('main'),
  let canv = createCanvas(400, 400);
  // keep a reference
  let originParent = canv.parent();  
  canv.parent(mainFrame);
  // delete it now
  originParent.remove();
}

如果你是 instance mode 中的运行，你可以像这样将 node 传递给 p5() 构造函数。这将阻止 main 首先被创建。

const s = p => {
  p.setup = function() {
    p.createCanvas(400, 400);
  };

  p.draw = function() {
  };
};

new p5(s, document.body);

未来阅读有关如何在 global mode 中创建它的信息。

global mode通过new p5()创建元素，source, without passing a node as a parameter like we did in the example above in instance mode, so here, source你会看到main节点是如何创建的，

  if (this._userNode) {
    // user input node case
    this._userNode.appendChild(c);
  } else {
    //create main element
    if (document.getElementsByTagName('main').length === 0) {
      let m = document.createElement('main');
      document.body.appendChild(m);
    }
    //append canvas to main
    document.getElementsByTagName('main')[0].appendChild(c);
  }

把_userNode赋值给了我们传入的参数，也就是global mode它不存在，所以它创建了一个main元素作为容器

P5 创建 <main></main>，我该如何防止这种情况发生？

P5 creates <main></main>, how do I prevent that?

html

javascript

p5.js