每次执行p5脚本时，它都会在主体中放置一个空的main标记。
可能是因为我的设置(但我不这么认为):
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()的东西吗?
在将其设置为另一个容器之前保持对前一个容器的引用，并在稍后删除前一个容器
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()创建元素，而不像我们在上面的instance mode示例中那样将node作为参数传递，所以在这里，您将看到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元素作为容器。
这一行:mainFrame = createElement('main')创建了一个标记main并将其添加到DOM中。这就是添加到DOM中的内容。
您可以简单地将您发布的所有代码替换为:
function setup(){
let canvas = createCanvas(400,400);
}
就是这样!其余的代码只做您不希望它做的事情。如果你想把画布放到另一个元素中，只需将父元素的id作为参数传递给canvas.parent()
例如:HTML:
<div id = "canvas-container"></div>
JavaScript:
function setup(){
let canvas = createCanvas(400,400);
canvas.parent("canvas-container");
}