时间戳

首页 > 解决方案 > P5 创建

，我该如何防止呢？

javascript - P5 创建
，我该如何防止呢？

问题描述

每次执行我的 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()？

标签： javascripthtmlp5.js

解决方案

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

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像这样将 a 传递给 p5() 构造函数。这将首先防止main被创建。

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

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

new p5(s, document.body);

未来阅读有关它是如何在global mode.

通过sourceglobal mode创建元素new p5()，而不像我们在上面的示例中那样传递 a作为参数，所以在这里，source你将看到节点是如何创建的，nodeinstance modemain

  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元素作为容器。

推荐阅读