如何定位p5.js生成的HTML Canvas？解决位置异常与重叠问题

问题原因 #

p5.js默认会自动将生成的<canvas>元素追加到HTML文档的<body>末尾，所以无论你把脚本放在<head>还是<body>里，画布都会出现在页面最后，且多个脚本会重复创建canvas导致重叠。

方法一：使用parent()指定画布容器 #

这是最简单的解决方案，通过在setup()函数中调用parent()方法，将画布挂载到你指定的DOM元素中：

步骤1：修改HTML，添加容器 #

在<body>的目标位置添加一个带ID的容器元素，比如<div>：

<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
    <script src="test.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a sentence</p>
    <!-- 画布将被插入到这个容器中 -->
    <div id="canvas-container"></div>
    <p>画布之后的内容</p>
  </body>
</html>

步骤2：修改p5.js代码，指定父容器 #

在setup()函数中，创建画布后调用parent()，传入容器的ID：

function setup() {
  let canvas = createCanvas(400, 400);
  // 将画布挂载到指定容器
  canvas.parent('canvas-container');
}

function draw() {
  background(220);
  circle(200,200,50);
}

方法二：使用实例模式（避免多脚本冲突） #

如果你的页面有多个p5.js脚本，推荐使用实例模式，它能避免全局函数冲突，同时精准控制每个画布的位置：

修改test.js为实例模式 #

// 创建p5实例，绑定到指定容器
let sketch = function(p) {
  p.setup = function() {
    p.createCanvas(400, 400);
  };

  p.draw = function() {
    p.background(220);
    p.circle(200,200,50);
  };
};

// 将实例挂载到指定容器
new p5(sketch, 'canvas-container');

对应的HTML和方法一一致，需要有<div id="canvas-container"></div>，多个p5实例可以分别挂载到不同容器，不会重叠。

为什么之前调整CSS无效？ #

你之前调整的CSS如果没有针对p5自动生成的<canvas>元素，或者仅修改position属性，由于默认画布是追加在body末尾，即使设置position: relative，它依然处于文档流的最后位置。只有将画布放入你指定的容器，才能让它跟随容器的位置排列。

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