使用影像

<canvas>也可以使用影像呈現圖片或作為背景，只要是瀏覽器支援的圖片格式都可以支援，ex.PNG、GIF、JPG或是同一頁面其他畫布產生的影像。

繪製影像

繪製影像主要有兩個步驟：
【step 1】 取得HTMLImageElement物件或其他畫布元素參照:

• 可接受的資料型態：HTMLImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap等等。
• 取得影像方法：使用同一份網頁上的影像、使用來自其他網域的影像、使用其他畫布元素、創造全新的影像。

【step 2】 用drawImage()函數在畫布上畫影像，包含以下表格三種方法:

以上方法參數介紹：
image:要使用的 Image、Canvas 或 Video,
sx:非必要，開始裁剪的x座標,
sy:非必要，開始裁剪的y座標,
swidth:非必要，被裁剪影像的寬度,
sheight:非必要，被裁剪影像得高度,
x:畫布放置影像的x座標,
y:畫布放置影像的y座標,
width:非必要，使用影像的寬度,
height:非必要，使用影像的高度

小小範例

codepen範例連結

// 試試切割圖片並畫出來
ctx.drawImage(document.getElementById('source'),20, 1, 600, 480, 5, 30, 300, 240)

最後成果:

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial/Using_images
[2]https://www.w3school.com.cn/tags/html_ref_canvas.asp
[3]https://www.runoob.com/w3cnote/html5-canvas-intro.html
[4]http://web.h3399.cn/CanvasRenderingContext2D.htm