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