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

Question

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

p5.js

30

我想在网页的一个部分中添加 p5.js 的背景。我是 JavaScript 的新手，不知道如何将这两个部分绑定在一起。

- Meghan Rose

4个回答

6

如果你在同一页面中插入多个p5js画布，并且已经使用了new p5(sketch)形式，那么你可以将div的id作为第二个参数传递进去，像这样：new p5(sketch, idnameofdiv)。由于sketch函数应该是唯一的（如果你没有使用IIFE），所以我喜欢在sketch函数的名称中添加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的答案。

- fredericrous

5

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作为背景”，会得到大量结果。如果遇到问题，请尝试一些方法，并发布MCVE。

- Kevin Workman

4

更详细地解释一下答案： function setup() 是一个在启动时只执行一次的函数。 function draw() 是一个在 setup() 之后执行的函数，它会在每一帧图像中重新加载。

代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>P5.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/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.</p>
</body>
</html>

请检查以下代码： https://jsfiddle.net/sugandhnikhil/74Ltdy8z/1/

- Nikhil S

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Paccione · Accepted Answer

你需要在setup中添加代码。

确保该函数也在HTML的脚本标签中，注意不要在.parent()中添加#。

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