从 p5js 渲染器中清除 createGraphics() canvas

Question

p5js 有一个 clear() 函数，可以清除屏幕上的所有内容。我想保留由 createCanvas() 创建的 canvas 但只清除 createGraphics() 一个。我该怎么做？

//something like this
var canvas2;
function setup() {
  createCanvas(400, 400);
  canvas2 = createGraphics(400,400);
  canvas2.clear()
  noLoop()
}

function draw() {
  fill(255,0,0)
  rect(60,60,40,40)
  canvas2.fill(20,44,240);
  canvas2.rect(20,20,40,40);
  image(canvas2,0,0)
}

function mousePressed() {
  //something which clears the createGraphics() canvas only and keeps the createCanvas() one
}

Answer 1

您可以使用 clear() 函数清除图形对象的内容。这是一个例子：

var canvas2;

function setup() {
  createCanvas(400, 400);
  
  canvas2 = createGraphics(400,400);
  canvas2.fill(20,44,240);
  canvas2.rect(20,20,40,40);
}

function draw() {
  background(255);

  fill(255,0,0)
  rect(60,60,40,40)

  image(canvas2,0,0)
}

function mousePressed() {
  canvas2.clear();
}

我将 canvas2.rect(20, 20, 40, 40) 调用移到了 setup() 函数中，否则即使清除它，您也会重新绘制到 canvas。我还删除了您的 noLoop() 调用，以便您可以看到清除 canvas.

的结果

从 p5js 渲染器中清除 createGraphics() canvas

Clearing createGraphics() canvas from p5js renderer

processing

p5.js