我的圖像沒有出現在畫布上有問題，你們可以幫我嗎？

Question

我正在嘗試制作飛揚的鳥，但是當我嘗試將背景加載到畫布上時，它什么也沒做

 var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); // load img var bird = new Image(); bird.src = "img/bird.png"; var bg = new Image(); bg.src = "img/bg.png"; var fg = new Image(); fg.src = "img/fg.png"; var pipeNoord = new Image(); pipeNoord.src = "img/pipeNorth.png"; var pipeSouth = new Image(); pipeSouth.src = "img/pipeSouth.png"; // draw images window.onLoad = function(){ ctx.drawImage(bg, 0, 0); } 

Answer 1

我建議您將整個圖像加載代碼移到onload處理程序中。 這樣，您可以確保在實際調用drawImage之前已加載所有內容。 另外，正如@Chris G所提到的，它是window.onload ，而不是window.onLoad ：

 // draw images window.onload = function(){ var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); // load img var bird = new Image(); bird.src = "img/bird.png"; var bg = new Image(); bg.src = "img/bg.png"; var fg = new Image(); fg.src = "img/fg.png"; var pipeNoord = new Image(); pipeNoord.src = "img/pipeNorth.png"; var pipeSouth = new Image(); pipeSouth.src = "img/pipeSouth.png"; ctx.drawImage(bg, 0, 0); }