如何在HTML/CSS网格中展示多个p5.js脚本的运行效果

核心问题说明 #

你之前的代码无法实现网格布局有两个核心原因：

1. 全局模式下p5.js默认将生成的canvas元素直接追加到<body>末尾，不会嵌套在你放置脚本的.grid-item容器内，CSS网格无法作用于这些canvas
2. 多个全局模式的p5脚本会互相覆盖setup、draw等全局函数，最终仅最后一个脚本可以正常运行

分步实现方案 #

1. 修改所有p5脚本为实例模式 #

可以同时解决全局函数冲突、指定canvas父容器的问题，单份脚本修改示例如下：

// sketch1.js 示例，其他sketch仅需修改对应函数名和父容器ID即可
const sketch1 = function(p) {
  const canvas_size = 200;
  p.setup = function() {
    let canvas = p.createCanvas(canvas_size, canvas_size);
    canvas.parent('sketch-1'); // 绑定到对应ID的grid-item容器
    p.frameRate(300);
  };
  p.draw = function() {
    p.background(p.random(255));
  };
};
new p5(sketch1);

注意：实例模式下所有p5原生方法都需要加前缀p.，比如原来的random()改为p.random()、fill()改为p.fill()

2. 调整index.html的容器ID #

给每个.grid-item添加对应ID，匹配sketch中指定的父容器：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sketch</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="libraries/p5.min.js"></script>
    <script src="libraries/p5.sound.min.js"></script>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item" id="sketch-1"><script src="sketch1.js"></script></div>
      <div class="grid-item" id="sketch-2"><script src="sketch2.js"></script></div>
      <div class="grid-item" id="sketch-3"><script src="sketch3.js"></script></div>
      <div class="grid-item" id="sketch-4"><script src="sketch4.js"></script></div>
      <div class="grid-item" id="sketch-5"><script src="sketch5.js"></script></div>
      <div class="grid-item" id="sketch-6"><script src="sketch6.js"></script></div>
      <div class="grid-item" id="sketch-7"><script src="sketch7.js"></script></div>
      <div class="grid-item" id="sketch-8"><script src="sketch8.js"></script></div>
      <div class="grid-item" id="sketch-9"><script src="sketch9.js"></script></div>
    </div>
  </body>
</html>

3. 替换style.css内容 #

以下配置默认固定为3列布局（9个内容自动排列为3行3列），同时支持响应式适配：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: grid;
  /* 固定3列，需要自适应列数可替换为 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; /* 格子之间的间距，可自行调整 */
  width: 100%;
  max-width: 650px; /* 整个网格的最大宽度，可自行调整 */
}

.grid-item {
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 让canvas适配容器大小，小屏幕自动缩放 */
.grid-item canvas {
  max-width: 100%;
  height: auto;
}

内容的提问来源于stack exchange，提问作者carloab