Question

我正在尝试将p5.js添加到我网页中某个部分的背景中。我是javascript的新手，无法弄清楚如何将这两个部分绑定在一起。

Answer 1

如果您要在一页中插入多个p5js画布并且已经使用new p5(sketch)格式，则只需将div的id作为第二个参数传递即可，例如new p5(sketch, idnameofdiv)

因为函数草图应该是唯一的（如果您不使用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's answer

Answer 2

P5.js为您提供了一个 html画布，可用于定位草图。

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 as background”之类的内容，获得大量结果。尝试一下，如果卡住了就发布MCVE。

Answer 3

要详细了解答案，

function setup()是一次在启动时执行一次的功能。

function draw()是在setup（）之后执行的功能，它会重新加载图片的每一帧。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>P5.js Example</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
        <script>
            function setup(){
                var canvas = createCanvas(400, 400);
                canvas.parent('canvasForHTML');
            }
            
            function draw(){
                background(127);
            }
        </script>
    </head>
    <body>
    <h1>Canvas for visualization</h1>
    <div id="canvasForHTML"></div>
    <p>Move your mouse around to see circles.</h1>
    </body>
</html>

检查以下内容： https://jsfiddle.net/sugandhnikhil/74Ltdy8z/1/

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

3 个答案: