如何将p5.js画布放在html div中
答
P5.js为您提供了一个html canvas,您可以使用它来定位草图。
Here是使用帆布作为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作为背景”的搜索功能获得大量结果。尝试一下,如果卡住了,请发帖MCVE。
答
您需要在您的设置中添加代码。
确保您必须在html中的脚本标记中运行。 请注意,您不要在.parent()中添加#。
var myCanvas = createCanvas(winWidth, winHeight);
myCanvas.parent("idnameofdiv");