Javascript ES6 HTML5畫布圖像未繪制到背景畫布或背景畫布未顯示

Question

圖像未繪制到z-index為0的bg_canvas上，僅顯示了我的主游戲畫布疊加層，而我僅包含了代碼的開頭。

// HTML

<canvas id="bg-canvas" width="768" height="600"></canvas>
<canvas id="canvas" width="768" height="600"></canvas>

// CSS

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

#canvas {   
z-index: 1

}

#bg-canvas {
    z-index: 0
}


// Javascript
const bg_canvas = document.getElementById('bg-canvas');
const bg_ctx = bg_canvas.getContext("2d");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const map = {
    object: {
        brickwall: new Image(),
        woodenbox: new Image()
    }
};

map.object.brickwall.src = "objects/brickwall.jpeg";
map.object.woodenbox.src = "objects/boximage.jpg";



ctx.clearRect(0,0,canvas.width,canvas.height);
bg_ctx.clearRect(0,0,bg_canvas.width,bg_canvas.height);


// var currentItemEquipped;
// drawImage(imgsrc, xcoord, ycoord, sizex, sizey) // drawImage parameters



map.object.brickwall.onload = () => bg_ctx.drawImage(map.object.brickwall, 100, 100, 100, 100);
map.object.woodenbox.onload = () => bg_ctx.drawImage(map.object.woodenbox, 200, 200, 100, 100);

播放器正在繪制，其余代碼工作正常，但是，我無法將這些圖像繪制到畫布上，這可能是z索引存在問題，或者覆蓋的畫布不透明。

Answer 1

您是否嘗試過“ window.addEventListener”？

因為有時候我在某些瀏覽器中遇到同樣的問題...

嘗試這個：

 function LoadImages(){ bg_ctx.drawImage(map.object.brickwall, 100, 100, 100, 100); bg_ctx.drawImage(map.object.woodenbox, 200, 200, 100, 100); } window.addEventListener("load", LoadImages); 

Answer 2

不得不在draw方法中調用該函數，但是由於背景畫布從未被清除，所以不確定為什么。