保存 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() 的 built-in API，根据文档，它创建并 returns 一个新的 p5.Renderer 对象。如果您需要绘制到 off-screen 图形缓冲区，请使用此 class。这两个参数定义了以像素为单位的宽度和高度。哪一个做你想做的事情，而且很可能比一次做一个像素要快得多。

参见 p5js.org/reference/#/p5/createGraphics 了解更多详情。

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

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

What is the faster way of saving canvas' pixels or state for later use?

javascript

canvas

p5.js