为什么在将图像绘制到画布时需要延迟？

Question

下面是代码：

var spriteFolder = "../../assets/Painter/sprites/"; 
var sprites = {}; 
sprites.background = new Image(); 
sprites.background.src = spriteFolder + "spr_background.jpg"; 
sprites.cannon_barrel = new Image(); 
sprites.cannon_barrel.src = spriteFolder + "spr_cannon_barrel.png"; 
sprites.cannon_red = new Image(); 
sprites.cannon_red.src = spriteFolder + "spr_cannon_red.png"; 
sprites.cannon_green = new Image(); 
sprites.cannon_green.src = spriteFolder + "spr_cannon_green.png"; 
sprites.cannon_blue = new Image(); 
sprites.cannon_blue.src = spriteFolder + "spr_cannon_blue.png"; 


var Canvas2D = { 
    canvas: undefined, 
    canvasContext: undefined 
}; 

Canvas2D.initialize = function(canvasName) { 
    Canvas2D.canvas = document.getElementById(canvasName); 
    Canvas2D.canvasContext = Canvas2D.canvas.getContext("2d"); 
}; 

Canvas2D.clear = function() { 
    Canvas2D.canvas.clearRect(0, 0, Canvas2D.canvas.width, Canvas2D.canvas.height); 
}; 

Canvas2D.drawImage = function(sprite, position, rotation, origin) { 
    Canvas2D.canvasContext.save(); 
    Canvas2D.canvasContext.translate(position.x, position.y); 
    Canvas2D.canvasContext.rotate(rotation); 
    Canvas2D.canvasContext.drawImage(sprite, 
     0, 0, sprite.width, sprite.height, 
     -origin.x, -origin.y, sprite.width, sprite.height 
    ); 
    Canvas2D.canvasContext.restore(); 
}; 

function init() { 
    Canvas2D.initialize("myCanvas"); 
    setTimeout(function() { 
     Canvas2D.canvasContext.drawImage(sprites.background, 0, 0); 
    }, 1000); 
} 
document.addEventListener("DOMContentLoaded", init); 

如果我不使用setTimeout，则图像不被绘制。为什么？

Answer 1

因为您的图像尚未加载。 感谢您的1秒超时，他们有足够的时间加载。

看一看从MDN https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

这个例子中你需要使用类似的方法 - 看img.onload()

function draw() { 
     var ctx = document.getElementById('canvas').getContext('2d'); 
     var img = new Image(); 
     img.onload = function(){ 
     ctx.drawImage(img,0,0); 
     ctx.beginPath(); 
     ctx.moveTo(30,96); 
     ctx.lineTo(70,66); 
     ctx.lineTo(103,76); 
     ctx.lineTo(170,15); 
     ctx.stroke(); 
     }; 
     img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; 
    }