如何使用 p5.js 清除部分缓冲图像

Question

我正在使用 javascript 和 p5.js 框架。我创建了一个离屏图形缓冲区。现在我想清除该缓冲区的一部分（因此它再次变得不可见）。最好的方法是什么？

现在我只能通过直接更改我需要的每个像素的 alpha 值来实现。

这是一个 MCVE：

// sketch.js, requires p5.js

function setup() {
  createCanvas(100,100);
  background(0);
  let mymap = createGraphics(100,100);
  mymap.fill(255);
  mymap.rect(20,20,40,40);
  mymap.loadPixels();
  for (let i = 23; i < 37; i++) {
    for (let j = 23; j < 37; j++) {
      mymap.pixels[400*i+4*j+3] = 0;
    }
  }
  mymap.updatePixels();
  image(mymap,0,0);
}

一些旁注：

1) p5.js 有一个 tiledmap.js 库，但我仍在阅读它的源代码，现在看起来他们没有为整个 tilemap 提供 1 个缓冲区。

2) 有一个 clear function 可以清除 canvas 图形，它确实清除了一些东西，但它清除了给定缓冲区中的所有内容。

Answer 1

您应该可以使用 set() 功能。可以在 the reference.

中找到更多信息

我希望这样的东西能起作用：

const transparency = createGraphics(20, 20);
mymap.set(30, 30, transparency);
mymap.updatePixels();

不幸的是，这似乎只设置了一个像素。这对我来说是个错误，所以我在 GitHub 上提交了 this bug。

如您所见，您也可以直接设置像素值。这可能比您目前拥有的更简单：

let mymap;

function setup() {
  createCanvas(100,100);
  mymap = createGraphics(100,100);
  mymap.fill(255, 0, 0);
  mymap.rect(20,20,40,40);

    for(let y = 30; y < 50; y++){
        for(let x = 30; x < 50; x++){
            mymap.set(x, y, color(0, 0, 0, 0));
        }
    }

    mymap.updatePixels();
}

function draw() {
  background(0, 255, 0);
  image(mymap,0,0);
}

请注意，需要权衡取舍：此代码更简单，但速度也更慢。

如何使用 p5.js 清除部分缓冲图像

How to clear part of the buffered image with p5.js

javascript

rendering

p5.js