在p5.js中，清除draw（）中每帧都要更改的元素，但保留setup（）中创建的昂贵元素（一个映射）

Question

使用P5.js和D3.js进行映射，我在画布上的setup()中加载了特定县的美国地图。这需要大约1/2-1秒来加载，因为shapefile相当大

在draw()中，我创建了一些文本、椭圆等，我希望使用滑块进行更新，并可能创建一些额外的动画。

通常在p5.js中，您只需在draw()之后使用background(255)来清除所有内容，并使过渡平滑，这样就不会有任何重叠，旧的椭圆和文本会被清除，等等。

我的问题是我的初始地图是如此昂贵的加载，我不能抹去它和重新绘制它每一帧，它落后于所有。我需要绘制一次地图，然后在地图之外的所有其他元素上做一个背景(255)，或者基本上清除每一帧在draw（）中创建的所有内容，同时将在setup（）中创建的地图留在画布上。或者只清除地图以外的所有元素。

下面是我在p5编辑器中所做的假设代码。背景中的rect是地图的占位符。您可以看到，因为文本和椭圆没有被删除，它们重叠，一旦椭圆达到一定的大小，您就不能减小它们的大小，因为大的椭圆仍然存在。

https://editor.p5js.org/dfeusse/sketches/hkje2kj9m

Answer 1

您有几个选择：

>

如果地图始终相同，则可以将其保存到图像文件中。将它加载到setup()函数中的变量中，然后在draw()函数中绘制它。

如果映射在程序运行期间可能发生变化，那么可以在setup()中将映射绘制到缓冲区，然后在draw()中绘制该缓冲区。creategraphics()函数将在这里派上用场。

    var pg;

    function setup() {
      createCanvas(100, 100);
      pg = createGraphics(100, 100);
      pg.background(100);
      pg.noStroke();
      pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
    }

    function draw() {
      background(200);
      image(pg, 50, 50);
      image(pg, 0, 0, 50, 50);
    }