你如何处理html5的画布图像加载异步？

在使用画布之前预加载图像.将所有图像URL放入一个数组中,循环遍历数组创建新图像,当它们全部加载时,调用一个将启动画布工​​作的函数.

以下片段使用原生JS Promises,但如果支持没有本机Promise的旧浏览器,您可以以类似的方式使用Q或jQuery库

var images = ['imageurl.jpg','imageurl2.jpg','imageurl3.jpg'];
var loadedImages = {};
var promiseArray = images.map(function(imgurl){
   var prom = new Promise(function(resolve,reject){
       var img = new Image();
       img.onload = function(){
           loadedImages[imgurl] = img;
           resolve();
       };
       img.src = imgurl;
   });
   return prom;
});

Promise.all(promiseArray).then(imagesLoaded);

function imagesLoaded(){
   //start canvas work.

   //when needing to draw image, access the loaded image in loadedImages
   ctx.drawImage(loadedImages['imageurl.jpg'], 300, 100);
}