为什么我的图像不会立即绘制？ HTML5 画布

Question

所以，这是我的代码

function drawLocations(){
    var i = 2;
    var storedData = sessionStorage.locations;
    locations = JSON.parse(storedData);
    while(i<25){
        var img = new Image();
        img.src = locations[i];
        ctx.drawImage(img,i*20,canvas.height-40);
    i++;
    }
}

当我在控制台中打印 sessionStorage.locations 变量时，它会打印一个如下所示的数组...

["","","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png"]

这正是它应该做的。我用 JSON 对数组进行了字符串化，因此在 sessionStorage 中存储数组不是问题。问题是当我运行我的代码时，大约需要 30 秒才能在屏幕上绘制所有尖峰。我不知道是怎么回事。

Answer 1

在尝试绘制图像之前，您没有给图像加载时间。

您必须使用 .onload，它会在您的图像完全加载后调用。

这是一个使用 image.onload 的示例：http://jsfiddle.net/m1erickson/yjS2L/

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/picketFence.jpg";
function start(){
    for(var i=0;i<3;i++){
        ctx.drawImage(img,i*99,canvas.height-img.height);
    }
}