javascript - 我可以使用 p5js 在同一页面上创建多个 Canvas 元素吗

Question

我尝试使用 p5js 绘制一些点，它确实工作得很好，但我还想要另一个可以显示来自相机的实时视频的 Canvas 元素。当我添加另一个 Canvas 元素时，第一个 Canvas 变为空白。现在我尝试使用多个 javascript 文件来处理不同的 Canvas 。

相机.js

var capture;

function setup() {
  var video=createCanvas(390, 240);
  capture = createCapture(VIDEO);
  capture.size(320, 240);
  capture.hide();
  //set parent to div with id left
  video.parent("left");
}

function draw() {
  background(255);
  image(capture, 0, 0, 320, 240);
  filter('INVERT');
}

绘制形状.js

function setup() {
  // Create the canvas
  var plot=createCanvas(720, 400);
  background(200);
  //set parent to div with id right
  plot.parent("right");
  // Set colors
  fill(204, 101, 192, 127);
  stroke(127, 63, 120);

  // A rectangle
  rect(40, 120, 120, 40);
  // An ellipse
  ellipse(240, 240, 80, 80);
  // A triangle
  triangle(300, 100, 320, 100, 310, 80);

  // A design for a simple flower
  translate(580, 200);
  noStroke();
  for (var i = 0; i < 10; i ++) {
    ellipse(0, 30, 20, 80);
    rotate(PI/5);
  }
}

index.html

<div class="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

Answer 1

你会想要使用 instance mode .前几个示例使用全局模式，接下来的几个示例使用实例模式。在实例模式下，您可以控制 p5js 放置 Canvas 元素的位置，而不是使用默认 Canvas 。如果您有两个容器，您将使用:

new p5(leftSketch, 'left');
new p5(rightSketch, '右');

leftSketch 和 rightSketch 将是采用变量 p 的函数。该变量是 p5js 的一个实例，您可以分别控制每个 Canvas 元素。