保存画布像素或状态以供以后使用的更快方法是什么？

Question

因为每次调用 draw() 时使用 p5js 绘制对象都会减慢我的素描速度，所以我想保存我的画布的副本而不使用任何移动对象，然后只重绘之前被移动对象覆盖的部分背景它会移动。

我尝试使用 get() 函数创建一个颜色数组并向下浏览整个屏幕，希望我可以从中获取一个补丁并将需要清除的任何内容替换为以前的方式。这可行，但复制整个画布，尤其是当我的画布占据浏览器的整个屏幕时，速度非常慢。

tl;dr 我正在尝试保存我的画布以便稍后修补屏幕的某些部分，但它需要的时间太长

var defaultScreenPixels;

function savePixels(){
  for(let i = 0; i < screenHeight; i++){
    defaultScreenPixels[i] = [];
    for(let j = 0; j < screenWidth; j++){
      defaultScreenPixels[i].push(get(j, i));
    }
    console.log("Saved " + i +" row(s) of the screen, " + (screenHeight - i) 
+" rows to go");
  }
}

Answer 1

p5js 有一个名为 createGraphics() 的内置 API，根据文档，它说创建并返回一个新的 p5.Renderer 对象。如果您需要绘制到离屏图形缓冲区，请使用此类。这两个参数以像素为单位定义宽度和高度。哪个做你想做的事情，并且最有可能比一次做一个像素快得多。

有关详细信息，请参阅 p5js.org/reference/#/p5/createGraphics。

这里有一个示例，您可以使用 image() 将屏幕外图形缓冲区复制回屏幕。 http://p5js.org/examples/structure-create-graphics.html