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","http://www.dm123.cn/ecms/d/file/2015-02-01/ae20761d9c6ff6e87989634a586a1906.jpg");
MikuImageManager.addImg("girl02","http://