HTML5 - canvas : drawImage(2)

HTML

<!--Original source http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/-->

<canvas id="myCanvas" width="400" height="400"></canvas>

JQuery 1.9.1

$(function(){
  function loadedImg(sources,callback){//sources=圖片素材來源物件，callback=處理圖片載入的callback function
  var imgs={};//建立imgs物件
  var loadedImgs=0;//預設已載入的圖片數為0
  var imgsTotal=0;//預設載入圖片總數為0
  for(var src in sources){//遍歷sources物件，src初始值為0
    imgsTotal++;//每執行一次imgsTotal+1
  };
  for(var src in sources){//遍歷sources物件，src初始值為0
    imgs[src]=new Image();//創建<img>物件
    imgs[src].onload=function(){//當圖片載入後
      if(++loadedImgs>=imgsTotal){//loadedImg先+1，當以載入圖片>=圖片總數時
        callback(imgs);//將imgs物件放入callback function
      };
    };
    imgs[src].src=sources[src];//將sources物件的圖片連結擷取出來給imgs
    };
  };
  var cxt=$('#myCanvas')[0].getContext('2d');
  var imgLink={//存有圖片路徑的物件
    photo1:'https://c2.staticflickr.com/1/437/18634993201_10aa53d5ef_k.jpg',
    photo2:'https://c3.staticflickr.com/1/469/18010094874_0b037901e4_k.jpg'
  };
  loadedImg(imgLink,function(i){//這邊的function(i)等於callback(imgs)
    cxt.drawImage(i.photo1,10,10,200,200);//創建第一張圖，用i.photo來連結使用的<img>
    cxt.drawImage(i.photo2,10,220,200,200);//創建第二張圖，用i.photo來連結使用的<img>
  });
});

主要使用function :

1. loadedImg() - 此function的作用為，當圖片都載入完成後，才繪製canvas裡的圖片。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/qs6erbqL/