canvas画图

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

  多张图片绘制需要按照特定的顺序,而加载完成顺序是完全无法预测,只能等待所有图片加载完成,才能开始绘制。

  /***************************

  //典型的错误代码

  var img1 = new Image();

  img1.src = "";

  img1.onload = function(){

       ctx.drawImage(img1, x, y);

  }

  var img2 = new Image();

  img2.src = "";

  img2.onload = function(){

       ctx.drawImage(img2, x, y);

  }

  ******************************/

  var progress = 0;    //加载进度 0~100

  var img1 = new Image();

  img1.src = "";

  img1.onload = function(){

       progress += 80;

       if(progress===100){

              startDraw();

       }

  }

  var img2 = new Image();

  img2.src = "";

  img2.onload = function(){

       progress += 20;

       if(progress===100){

              startDraw();

       }

  }

 

原文地址:https://www.cnblogs.com/liangfc/p/7375499.html