canvas的drawImage方法有个缺点，就是当图片还未加载完成时调用它将无效。
当然，在高速运转的游戏主循环中，，可以直接忽略这个问题，或者用 img.complete == true来做下判断。
在游戏循环之外的地方，可以用 img.onload = function (){};这样的回调解决。
但是，如果需要实现预先大量图片的加载，并且将加载进度告知用户，这时就需要一个图片加载器。
一.图片加载器原理
1.对于每张图片，开启对应的一个线程去负责加载，加载完成后修改一个变量的值-loadedNum
2.额外开启一个线程，监控loadedNum与needLoadNum的值，当加载全部完成时，调用回调函数。
3.由于javascript没有传统意义的线程机制，所以要使用setInterval模拟这些操作。
二.图片加载器的使用
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//canvas自适应MikuScaleUtil.rejustCanvas(canvas);//图片加载器MikuImageManager.addImg("girl01","");MikuImageManager.addImg("girl02","");MikuImageManager.addImg("girl03","");MikuImageManager.addImg("girl04","");MikuImageManager.initImgs(loadImage,main);//主函数function main(){context.drawImage(MikuImageManager.getImg("girl01"),0,0);}function loadImage(loaded,total){console.log(loaded+"|"+total);}
1.使用addImg方法添加图片链接到加载器中
2.调用initImgs（loadImage，main）；方法起动加载器
loadImage这个回调函数是，每隔50毫秒调用一次，输出当前已经加载图片的数量与总数。可以用它来更新进度条。
main这个回调是，当加载完成后调用。
3.getImg（name），方法可以使用之前取得名字获取图片对象。
三.效果图：
四.源代码
//工具类01-图片管理工具function MikuImageManager(){};//私用属性MikuImageManager._imgArray = new Array();MikuImageManager._loadedNum = 0;//公有方法MikuImageManager.addImg = function(name,src){var img = new Image();img.src = src;img.name = name;img.loaded = false;MikuImageManager._imgArray.push(img);};MikuImageManager.getImg = function(name){var target ;MikuImageManager._imgArray.forEach(function(img){if(img.name == name){target = img;}});return target;};MikuImageManager.initImgs = function(onLoadCallBack,loadOvercallBack){MikuImageManager._imgArray.forEach(function(img){MikuImageManager._loadImg(img);});var timer = setInterval(function(){//console.log(MikuImageManager._loadedNum+"|"+MikuImageManager._imgArray.length);onLoadCallBack(MikuImageManager._loadedNum,MikuImageManager._imgArray.length);if(MikuImageManager._loadedNum === MikuImageManager._imgArray.length){//console.log("全部图片加载完成");clearInterval(timer);//回调loadOvercallBack();}},50);};//私有方法MikuImageManager._loadImg = function(img){var checkTime = 0;//设置定时器var timer = setInterval(function(){checkTime = checkTime + 50;//console.log("加载耗时:"+img.name+"|"+checkTime);//如果图片加载完成if(img.complete == true){MikuImageManager._loadedNum ++;//console.log("加载完成:"+img.name);//清除定时器clearInterval(timer);}},50);};本文由 CSDN MIKUScallion 原创，更多canvas案例代码：
如若今生再相见，哪怕流离百世，迷途千年，也愿。
