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

Question

因为每次调用 draw() 时使用 p5js 绘制对象都会减慢我的草图速度，所以我想保存 Canvas 的副本，而无需任何移动对象，然后每次只重新绘制先前被移动对象覆盖的部分背景它会移动。

我尝试使用 get() 函数创建一个颜色数组，然后遍历整个屏幕，希望我可以从中获取一个补丁，并将需要清除的内容替换为之前的样子。这可行，但是复制整个 Canvas ，特别是当我的 Canvas 占据浏览器的整个屏幕时，速度非常慢。

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

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