html5 js自动加载图片,javascript – html5画布图像不显示或图像未加载

实际上,您可以确定所有图像何时完成加载.为此,您只需要为图像对象的onload属性指定一个回调函数.所以,你最终会得到这样的东西(除了你在canvas.js中已有的代码)：

var loaded_images = 0;

var image_objects = [];

// This is called once all the images have finished loading.

function drawOnCanvas() {

for (var i = 0; i < image_objects.length; ++i) {

ctx.drawImage(image_objects[i], 0, 0);

}

}

function handleLoadedImage() {

++loaded_images;

// Check to see if all the images have loaded.

if (loaded_images == 7) {

drawOnCanvas();

}

}

document.ready = function() {

for (var i=0;i

var tempimage = new Image();

tempimage.src= myimages[i];

tempimage.onload = handleLoadedImage;

image_objects[i] = tempimage;

}

}

关键概念是您要跟踪已完成加载的图像数量.完成所有图像加载后,您就知道可以在画布上绘图了.