Javascript ES6 HTML5 画布图像未绘制到背景画布或背景画布未显示答案

【问题标题】：Javascript ES6 HTML5 canvas images not drawing to background canvas or background canvas not showingJavascript ES6 HTML5 画布图像未绘制到背景画布或背景画布未显示
【发布时间】：2018-02-06 08:01:46
【问题描述】：

图像未绘制到 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-indexes 的问题或覆盖的画布不透明。

【问题讨论】：

标签： javascript css html canvas html5-canvas

【解决方案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);

【讨论】：

【解决方案2】：

不得不在draw方法中调用函数，但不知道为什么，因为背景画布永远不会被清除。

【讨论】：