您可能希望使用instance mode。前几个示例使用全局模式，后几个示例使用示例模式。在示例模式下，您可以控制p5js放置canvas元素的位置，而不是使用默认canvas。如果您有两个容器，则可以使用：用途：
第一个月
leftSketch和rightSketch是接受变量p的函数。该变量是p5js的示例，您可以单独控制每个canvas元素。

这在官方的p5js参考资料中有简要的提及。
在一个草图中多次调用createCanvas会导致非常不可预测的行为。如果你想要多个画布，你可以使用createGraphics（默认情况下隐藏，但可以显示）。

解决方案

无可否认，这不是一个“伟大的”解决方案，但它肯定工作。
1.为两个“画布”创建1个画布。
1.创建2个屏幕外缓冲区供您绘制。
1.在draw()函数中，在每个缓冲区上绘制所需的内容。
1.然后使用image()将两个缓冲区的内容复制到主画布上。

示例

var leftBuffer;
var rightBuffer;

function setup() {
    // 800 x 400 (double width to make room for each "sub-canvas")
    createCanvas(800, 400);
    // Create both of your off-screen graphics buffers
    leftBuffer = createGraphics(400, 400);
    rightBuffer = createGraphics(400, 400);
}

function draw() {
    // Draw on your buffers however you like
    drawLeftBuffer();
    drawRightBuffer();
    // Paint the off-screen buffers onto the main canvas
    image(leftBuffer, 0, 0);
    image(rightBuffer, 400, 0);
}

function drawLeftBuffer() {
    leftBuffer.background(0, 0, 0);
    leftBuffer.fill(255, 255, 255);
    leftBuffer.textSize(32);
    leftBuffer.text("This is the left buffer!", 50, 50);
}

function drawRightBuffer() {
    rightBuffer.background(255, 100, 255);
    rightBuffer.fill(0, 0, 0);
    rightBuffer.textSize(32);
    rightBuffer.text("This is the right buffer!", 50, 50);
}

字符串

结果：

的数据

我通过将画布移动到单独的html页面，然后使用iframe显示来解决这个问题。
Canvas html页面的示例设置：

<style>
  /* remove whitespace and overflow that may affect the display in iframe */
  body {
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

<script>
  function preload() {
    // ... some code ...
  }

  function setup() {
    createCanvas(windowWidth, windowHeight);
  }

  function draw() {
    // ... some code ...
  }
</script>

字符串
实际网页：

<style>
  /* remove the default styling from the iframe */
  iframe {
    border: none;
  }
</style>

<!--
    Display the canvases using iframe.
    Style and layout them out as you wish using html and css
-->
<iframe src="/canvas_examples/example_1" title="Canvas Example 1"></iframe>
<iframe src="/canvas_examples/example_2" title="Canvas Example 2"></iframe>
<iframe src="/canvas_examples/example_3" title="Canvas Example 3"></iframe>

型