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

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 通道。我认为这会给我我想要的效果并在缓冲区上创建一个透明背景，允许 canvas 完全可见而无需实际绘制它。但是，如果我将 pg.background() 中的第四个参数设置为 0，则 Graphics 背景不会在 Graphics 椭圆上呈现，这意味着透明度仅相对于 Graphics 缓冲区中的对象。

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

Answer 1

听起来您只是在寻找 clear() 函数。 clear() 函数使图形对象完全透明。使用 pg.clear() 函数而不是 pg.background() 函数。您可以在 the reference.

中找到更多信息

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

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

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

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

How can I make backgrounds in p5.js transparent but continue to hide elements drawn on top of them?

javascript

rendering

canvas

p5.js