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

因为每次调用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");
  }
}

最佳答案

p5js有一个内置的API，称为createGraphics（），根据文档所述，该API创建并返回一个新的p5.Renderer对象。如果需要绘制屏幕外图形缓冲区，请使用此类。这两个参数以像素为单位定义宽度和高度。这是您正在尝试执行的操作，并且可能比一次完成一个像素要快得多。

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

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