<!--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 :
- loadedImg() - 此function的作用為，當圖片都載入完成後，才繪製canvas裡的圖片。
Result
JSFiddle
https://jsfiddle.net/MickeyChen/qs6erbqL/
