HTML5 Canvas 基礎(五) drawImage()- 繪製圖片

我們可以利用 drawImage() 的方式把圖片繪製到 canvas 上，最基本是 drawImage(image, dx, dy) ，image 填入圖片的網址，dx跟dy則是繪製在 canvas 上原點的座標位置。

由於圖片放到網路上會有讀取時間的問題，所以我們這邊寫成當圖片讀取完成後再繪製到 canvas 上

var imgObject = new Image();
imgObject.src = "https://tools.wingzero.tw/assets/upload/1579846830988_0.jpg";
       imgObject.addEventListener('load',function(){
  context.drawImage(imgObject,0,0);
})

由於 canvas 比圖片小，所以沒辦法完全把圖片放進去，可以進一步設定圖片的大小 drawImage(image, dx, dy, dWidth, dHeight)，新增的兩個參數為調整後的圖片大小，需注意如果比例跟原本的圖片大小不一樣時，圖片會變形。

完整的參數為 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，前面的 sx, sy 為裁切圖片的起點， sWidth 和 sHeight 為裁切的寬高，後面的 dx, dy, dWidth, dHeight 則跟前面範例一樣是繪製的起點與寬高，關係可以參考這張圖。

這樣我們再把圖片裁切如下：