今天想用canvas的drawImage接口顯示一張圖片，然後對做縮小操作時，遇到了個小問題。
drawImage的使用還是很簡單的，先創建一個image對象可以是img標簽，也可以用new Image創建。然後設置src和onload函數。示例如下：
//獲取canvas對象
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
var img = new Image()；
img.src = "images/img.png";
img.onload = function(){
ctx.drawImage(img,0,0);
}
如果要縮放只需添加ctx.scale(2,2)就OK。到這裡都沒什麼問題，接下來就出問題。我想在canvas的不同地方顯示同一圖片，其中一個地方是縮小圖，還一個地方不變。然後我的代碼變成了：
var img = new Image()；
img.src = "images/img.png";
img.onload = function(){
ctx.drawImage(img,0,0);
}
ctx.scale(0.2,0.2)
var img = new Image()；
img.src = "images/img.png";
img.onload = function(){
ctx.drawImage(img,10,10);
}
這時候問題是有時候第一張圖片也被縮小了0.2倍。正確的做法是把scale這個調用放到onload中。這時應該就明白了，其實很簡單，onload是在圖像加載完時調用的，而第一張圖片我們不能確定它是在scale設置之前就加載完了還是之後。當然第二張圖片肯定沒問題，我們在加載之前就先設置了scale。
最後代碼變成了：
var img = new Image()；
img.src = "images/img.png";
img.onload = function(){
ctx.drawImage(img,0,0);
}
var img = new Image()；
img.src = "images/img.png";
img.onload = function(){.
ctx.save();
ctx.scale(0.2,0.2)
ctx.drawImage(img,10,10);
ctx.restore();
}