在 p5JS canvas 更改背景图像显示背景图像后面已经绘制的对象

Question

我正在 canvas 上绘制一些对象，但如果稍后我根据需要更改背景图像，那么已经绘制的对象会位于背景图像的后面。如何将已经绘制的对象放在前面。下面是我用来更改背景图片的示例代码。

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

您可以将状态存储在某种数据结构中，然后每帧重绘所有内容。

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

the reference 中提供了更多信息。

在 p5JS canvas 更改背景图像显示背景图像后面已经绘制的对象

On p5JS canvas changing background image showing already drawn objects behind the background image

p5.js