如何在HTML/CSS网格中显示多个p5.js脚本

在HTML/CSS网格中显示多个p5.js脚本可以通过以下步骤完成：

创建一个HTML文件并链接p5.js库：

<!DOCTYPE html>
<html>
<head>
  <title>多个p5.js脚本示例</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
  <!-- 网格容器 -->
  <div class="grid-container">
    <div id="canvas1" class="grid-item"></div>
    <div id="canvas2" class="grid-item"></div>
    <div id="canvas3" class="grid-item"></div>
  </div>

  <style>
    /* 定义网格容器样式 */
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* 将页面划分为3个等宽列 */
      grid-gap: 20px; /* 设置网格间距 */
    }
    /* 定义网格项样式 */
    .grid-item {
      height: 300px; /* 设置网格项高度 */
    }
  </style>

  <!-- p5.js脚本 -->
  <script>
    // p5.js脚本1
    function setup1() {
      // 在canvas1中创建p5.js画布
      createCanvas(200, 200);
    }

    function draw1() {
      background(220);
      // 绘制p5.js图形
      ellipse(100, 100, 50, 50);
    }

    new p5(setup1, 'canvas1'); // 在canvas1中运行p5.js脚本

    // p5.js脚本2
    function setup2() {
      // 在canvas2中创建p5.js画布
      createCanvas(200, 200);
    }

    function draw2() {
      background(220);
      // 绘制p5.js图形
      rect(50, 50, 100, 100);
    }

    new p5(setup2, 'canvas2'); // 在canvas2中运行p5.js脚本

    // p5.js脚本3
    function setup3() {
      // 在canvas3中创建p5.js画布
      createCanvas(200, 200);
    }

    function draw3() {
      background(220);
      // 绘制p5.js图形
      line(0, 0, 200, 200);
    }

    new p5(setup3, 'canvas3'); // 在canvas3中运行p5.js脚本
  </script>
</body>
</html>

在HTML中创建一个网格容器（div）并为每个p5.js脚本创建一个网格项（div）。在上面的示例中，我们创建了一个网格容器，并在其中添加了3个网格项（canvas1、canvas2和canvas3）。
使用CSS设置网格容器和网格项的样式。在上面的示例中，我们使用CSS的grid布局属性定义了网格容器（grid-container）和网格项（grid-item）的样式。
在JavaScript中编写p5.js脚本。在上面的示例中，我们在脚本中定义了三个p5.js脚本（setup1/draw1、setup2/draw2和setup3/draw3）来创建和绘制不同的图形。
使用new p5(setup, 'elementId')语法在指定的网格项中运行每个p5.js脚本。在上面的示例中，我们通过传递相应的setup函数和网格项的id来运行每个脚本。

通过以上步骤，我们可以在HTML/CSS网格中显示多个p5.js脚本。每个脚本都在自己的网格项中创建和绘制p5.js图形。你可以根据需要调整网格容器和网格项的数量和样式，以及p5.js脚本的内容。

如何在HTML/CSS网格中显示多个p5.js脚本

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐