Canvas如何等待所有图片加载完成才开始绘图

如何等待所有图片加载完成才开始绘图?

浏览器加载图片属于“多线程异步加载”,完全无法预测哪一张图片先加载完成。但Canvas绘制图片时必须按一定顺序!——只能等待所有图片加载完成,才开始绘图!

解决:定义一个全局变量,每加载完成一张图片累加一个数值,当值达到每个临界点时,执行下一步。

var progress = 0;       //总的加载进度
img1.onload = function(){
    progress += 20; //加入当前图片的权重
    if(progress===100){   startDraw(); }
}
img2.onload = function(){
    progress += 80; //加入当前图片的权重
    if(progress===100){   startDraw(); }
}

你可能感兴趣的:(html5)