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

p5.js

8972 观看

2回复

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

作者: Meghan Rose 的来源 发布者: 2019 年 10 月 20 日

回应 (2)


13

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

确保还必须在html的script标记中起作用。请注意,不要在.parent()中添加#。

var myCanvas = createCanvas(winWidth, winHeight);
    myCanvas.parent("idnameofdiv");
作者: Michael Paccione 发布者: 11.04.2016 05:31

1

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画布作为背景”之类的内容进行搜索,以获取大量结果。尝试一下,如果遇到问题,请发布MCVE

作者: Kevin Workman 发布者: 27.02.2016 04:08
32x32