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

我要求将此作为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椭圆上渲染，这意味着透明度仅相对于Graphics缓冲区中的对象。

我需要一些帮助，以确定是否有任何方法可以使Graphics缓冲区对画布而不是对在Graphics缓冲区本身上呈现的对象透明。我知道这种解释可能会有些混乱，因此我绘制了一个小图以显示我的意思：

最佳答案

听起来您只是在寻找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);
}

关于javascript - 如何使p5.js中的背景透明，但继续隐藏在它们之上绘制的元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49710913/