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

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

这里有一个示例，您可以使用image（）将屏幕外的图形缓冲区复制回屏幕。 Get all available characters from a font

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

1 个答案: