如何使p5.js中的背景透明，但继续隐藏在它们上面绘制的元素？

Question

我问这是this question的后续行动。我想创建一个绘图应用程序，其中鼠标被椭圆替换，椭圆调整大小以适应画笔大小。问题是没有办法在不在画布上留下标记的情况下绘制椭圆。我想出解决这个问题的解决方案是使用createGraphics()作为缓冲对象并将光标渲染到它上面：

var brushSize = 60;

function setup() {
  createCanvas(1080,720);
  pg = createGraphics(1080, 720);
  background(100);
  noCursor();
}


function draw() {
  pg.background(0,0,0,0);
  pg.fill(255);
  pg.noStroke();
  pg.ellipse(mouseX/2,mouseY/2,brushSize);
  image(pg, 0, 0);

}

function mouseDragged() {
  noStroke();
  fill(255); 
  ellipse(mouseX,mouseY,brushSize);

}

在我的解决方案中，我使用createGraphics()跨越整个画布，渲染自己的背景，然后在光标位置绘制一个椭圆。在p5.js中，background()采用描述其alpha通道的第四个参数。我认为这会给我我想要的效果，并在缓冲区上创建一个透明的背景，允许完全可见的画布，而不实际绘制它。但是，如果我将pg.background()中的第四个参数设置为0，则图形背景不会在图形椭圆上呈现，这意味着透明度仅相对于图形缓冲区中的对象。

我需要一些帮助来确定是否有任何方法可以使Graphics缓冲区对画布透明，而不是对Graphics缓冲区本身渲染的对象。我知道这个解释可能有点令人困惑，所以我绘制了一个小图来说明我的意思：

Answer 1

听起来你只是在寻找clear()功能。 clear()函数使图形对象完全透明。使用pg.clear()功能代替pg.background()功能。您可以在the reference中找到更多信息。

但请注意，我在previous answer中的意思是你可以使用createGraphics()函数将绘画绘制到缓冲区，然后在上面绘制椭圆。像这样：

function draw(){
  background(0);
  image(paintBuffer, 0, 0);
  ellipse(mouseX, mouseY, brushSize);
}

function mouseDragged(){
  paintBuffer.ellipse(mouseX, mouseY, brushSize);
}