我正在尝试将p5.js添加到我的网页中的一个部分的背景中.我是javascript的新手,无法弄清楚如何将这两个部分绑定在一起.
Mic*_*one 13
您需要在设置中添加代码.
确保您还必须在html中的脚本标记中运行.请注意,不要在.parent()中添加#.
var myCanvas = createCanvas(winWidth, winHeight);
myCanvas.parent("idnameofdiv");
P5.js 为您提供了一个html 画布，您可以使用它来定位草图。
下面是使用画布作为 div 背景的示例：
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>paragraph 1</p>
<p>paragraph 2</p>
<script src="processing-1.4.1.min.js"></script>
<div id="canvasContainer">
<canvas data-processing-sources="rectangles.pde"></canvas>
</div>
</body>
这是Processing.js，而不是P5.js，但想法是相同的。尝试用谷歌搜索“html canvas as background”之类的内容以获得大量结果。尝试一些东西，如果遇到困难，请发布MCVE 。
如果您在一页中插入多个 p5js 画布并且已经在使用表单new p5(sketch)，则可以将 div 的 id 作为第二个参数传递，例如new p5(sketch, idnameofdiv)
因为函数Sketch应该是唯一的（如果你不使用IIFE），我也喜欢把 id 放在草图函数的名称中
function sketch_idnameofdiv(p) {
p.setup = function () {
p.createCanvas(400,400);
}
p.draw = function () {
// stuff to draw
}
}
new p5(sketch_idnameofdiv, 'idnameofdiv')
如果您不需要在一页中插入多个 p5js 画布，我猜您正在寻找Michael Paccione 的答案