在p5JS画布上更改背景图像，显示背景图像后面已绘制的对象

Question

我在画布上绘制了一些对象但是如果以后我按需更改背景图像，那么已经绘制的对象就在背景图像的后面。如何将已经绘制的对象放在前面。下面是我用来更改背景图像的示例代码。

function draw() { if(chnBg){ //if change background is clicked loadImage("images/Grid_Image.png",function(bg){
background(bg);
}); } }

Answer 1

在绘制/更改背景图片之前，您需要将globalCompositeOperation设置为destination-over ...

let canvas;

// setup
function setup() {
  canvas = createCanvas(width, height);
}

// draw
function draw() {
  if (chnBg) { //if change background is clicked 
    loadImage("images/Grid_Image.png", function(bg) {
      canvas.drawingContext.globalCompositeOperation = 'destination-over'; //<-- set this
      background(bg);
    });
  }
}

Answer 2

您可以将您的状态存储在某种数据结构中，并重新绘制每一帧的所有内容。

另一种方法是将对象绘制到缓冲图形而不是直接绘制到画布。然后将背景绘制到画布上，然后将缓冲区绘制到画布上。

the reference中提供了更多信息。