如何等待所有图片加载完成才开始绘图?
浏览器加载图片属于“多线程异步加载”,完全无法预测哪一张图片先加载完成。但Canvas绘制图片时必须按一定顺序!——只能等待所有图片加载完成,才开始绘图!
解决:定义一个全局变量,每加载完成一张图片累加一个数值,当值达到每个临界点时,执行下一步。
var progress = 0; //总的加载进度
img1.onload = function(){
progress += 20; //加入当前图片的权重
if(progress===100){ startDraw(); }
}
img2.onload = function(){
progress += 80; //加入当前图片的权重
if(progress===100){ startDraw(); }
}