Javascript P5创建<；main></main>；，我如何防止这种情况？_Javascript_Html_P5.js

Javascript P5创建<；main></main>；，我如何防止这种情况？

javascript html

Javascript P5创建<；main></main>；，我如何防止这种情况？,javascript,html,p5.js,Javascript,Html,P5.js,每次执行我的p5脚本时，它都会在主体中放入一个空的主标记可能是因为我的设置（但我不这么认为）：结果如下所示： <body> <main></main> <main> <div> <canvas id="defaultCanvas0" class="p5Canvas" width="400" height="400" st

每次执行我的p5脚本时，它都会在主体中放入一个空的主标记

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

结果如下所示：

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


.
.
.

是否有类似于

preventDefault（）

？

这一行：

mainFrame=createElement（'main'）

创建一个标记

main

，并将其添加到DOM中。这就是您看到的添加到DOM中的内容

您只需将发布的所有代码替换为：

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

就这些！代码的其余部分只执行您不希望它执行的操作。如果要将画布放在另一个元素中，只需将父元素的

id

作为参数传递给

canvas.parent（）

例如： HTML:

保留对上一个容器的引用，然后再将其设置为另一个容器，并在以后删除上一个容器

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

如果您是在

实例模式下运行的

，您可以像这样将

节点

传递给p5（）构造函数。这将首先阻止创建

main

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

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

new p5(s, document.body);

关于如何在

全局模式下创建它的后续阅读

全局模式

通过

new p5（）

创建元素，而不将

节点

作为参数传递，就像我们在上面的示例中在

实例模式

中所做的那样，因此在这里，您将看到如何创建

主

节点

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

\u userNode

被分配给我们传入的参数，它是

全局模式

它不在那里，所以它创建了一个

main

元素作为容器。

“这一行：mainFrame=createElement（'main'）创建了一个标记main并将其添加到DOM中。这就是您看到的添加到DOM中的内容。”这是我想要的，不是我不想要的。我是故意创造的。哦，我明白了。这更有意义。谢谢你的澄清。是否完全有必要删除这个空的主标记，或者它可以留在那里？移除它可能会有很多麻烦，尽管我相信如果你真的想，这是可能的。这就是我现在对自己的质疑。我只想要以下订单：>>。但是我不能使用普通的JavaScript，因为我已经开始使用P5了*我在过去（和现在）与p5合作过很多次，我可以证实，如果你想做一个井字游戏，你绝对可以用p5来做。只需创建画布，在页面上居中（或不居中），然后绘制。这是难以置信的简单。如果你真的愿意，我甚至可以在明天有时间的时候给你做一个小演示。但是不要气馁！我向你保证这是可能的，而且不需要任何特别的东西。：）啊，我明白了！听起来不错我也为你感到骄傲！干得好。祝你未来的项目好运。

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

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

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

new p5(s, document.body);

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