如何指定P5.js画布在HTML网页中的位置？解决错位与多文件异常

问题根源 #

1. 全局模式下，P5.js默认会将自动创建的画布追加到<body>标签末尾，不受<script>标签位置影响。
2. 多个全局模式的Sketch会互相覆盖setup()、draw()等全局函数，导致只有第一个Sketch生效。

最优解决方案：使用实例模式（Instance Mode） #

实例模式让每个Sketch独立运行，同时支持手动指定画布插入位置，完美解决上述两个问题。

1. 调整HTML结构，添加画布容器 #

在需要放置画布的位置添加带唯一ID的空容器，后续将画布插入这些容器：

<p> text1 </p>
<div id="sketch1-container"></div>
<p> text2 </p> 
<div id="sketch2-container"></div>

<!-- 先引入P5.js核心库 -->
<script src="p5.min.js"></script>
<!-- 再引入Sketch文件 -->
<script src="sketch1.js"></script>
<script src="sketch2.js"></script>

2. 将每个Sketch改为实例模式写法 #

每个Sketch通过new p5()创建独立实例，所有P5函数通过实例对象调用，避免全局冲突；创建画布后用canvas.parent()指定容器位置。

sketch1.js 示例：

new p5(p => {
  p.setup = () => {
    const canvas = p.createCanvas(200, 200);
    // 将画布插入目标容器
    canvas.parent('sketch1-container');
    p.background(255, 0, 0);
  };

  p.draw = () => {
    p.ellipse(p.mouseX, p.mouseY, 50, 50);
  };
});

sketch2.js 示例：

new p5(p => {
  p.setup = () => {
    const canvas = p.createCanvas(200, 200);
    canvas.parent('sketch2-container');
    p.background(0, 255, 0);
  };

  p.draw = () => {
    p.rect(p.mouseX - 25, p.mouseY - 25, 50, 50);
  };
});

单Sketch场景的简化写法（不支持多Sketch） #

如果仅需单个Sketch并指定位置，不想用实例模式，可在全局模式的setup()中手动移动画布：

function setup() {
  const canvas = createCanvas(200, 200);
  canvas.parent('sketch-container');
}

function draw() {
  // 绘制逻辑
}

注意：这种方式无法同时运行多个Sketch，因为全局函数会被覆盖。

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