从p5js渲染器中清除createGraphics画布

问题描述

p5js具有clear（）函数，可清除屏幕上的所有内容。我想保留由createCanvas（）创建的画布，但仅清除createGraphics（）。我该怎么办？

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

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

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

解决方法

您可以使用其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)
  rect(60,60,40)

  image(canvas2,0)
}

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

我将canvas2.rect(20,40)调用移到了setup()函数内部，因为否则，即使清除了画布，您还是要重新绘制到画布上。我还删除了您的noLoop()通话，以便您可以看到清理画布的结果。