在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。