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

Question

我问这个是对 this question 的跟进.我想创建一个绘图应用程序，其中鼠标被一个椭圆替换，该椭圆可以调整大小以适合画笔大小。问题是如果不在 Canvas 上留下标记，就无法绘制椭圆。我想出的解决这个问题的方法是使用 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() 跨越整个 Canvas ，渲染它自己的背景，然后在光标位置绘制一个椭圆。在 p5.js 中，background() 采用第四个参数来描述其 alpha channel 。我认为这会给我想要的效果并在缓冲区上创建一个透明背景，这样可以在不实际绘制 Canvas 的情况下完全看到 Canvas 。但是，如果我将 pg.background() 中的第四个参数设置为 0，则 Graphics 背景不会在 Graphics 椭圆上呈现，这意味着透明度仅与 Graphics 缓冲区中的对象有关。

我需要一些帮助来弄清楚是否有任何方法可以使图形缓冲区对 Canvas 透明，而不是对在图形缓冲区本身上呈现的对象透明。我知道这个解释可能有点令人困惑，所以我画了一张小图来说明我的意思:

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);
}