如何将p5.js画布放在html div中

我想将p5.js添加到我网页中某个部分的背景。我是JavaScript新手，无法弄清楚如何将两部分绑定在一起。如何将p5.js画布放在html div中

2016-02-26 Meghan Rose

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。

来源

2016-02-27 16:08:03

您需要在您的设置中添加代码。

确保您必须在html中的脚本标记中运行。请注意，您不要在.parent（）中添加＃。

var myCanvas = createCanvas(winWidth, winHeight); 
    myCanvas.parent("idnameofdiv");

来源

2016-04-11 05:31:04

如何将p5.js画布放在html div中

回答

相关问题