使用圖像
canvas 具有操作圖像的能力?？梢杂糜趧討B的圖像合成或者作為圖像的背景，以及游戲界面(Sprites)。瀏覽器支持的任意外部圖片格式都可以使用，還可以使用同一個頁面中其他canvas元素生成的圖片作為圖片源。
引入圖像到 canvas 里需要以下兩部基本操作：
- 獲得一個指向
HTMLImageElement的對象或者另一個 canvas 元素的引用作為源， 也可以通過提供一個URL的方式來使用圖片。 - 使用
drawImage()函數將圖片會知道畫布上。
獲得需要繪制的圖片
canvas 的API 可以使用下面這些類型中的一種作為圖片的源：
HTMLImageElement
這些圖片是由 Image() 函數構造出來的，或者任何的 <img> 元素
HTMLVideoElement
用一個HTML的 <video> 元素作為圖片源，可以從視頻中抓取當前幀作為一個圖像
HTMLCanvasElement
可以使用另一個 <canvas> 元素作為圖片源。
ImageBitmap
使用相同頁面內的圖片
-
document.images集合 -
document.getElementsByTagName()方法 - 使用指定圖片的ID
document.getElementById()獲得
使用其他域名下的圖片
在 HTMLImageElement 上使用 crossOrigin 屬性，可以請求加載其他域名上面的圖片。
使用其他 canvas 元素
使用 document.getElementsByIdTagName 或者 document.getElementById 方法來獲取其他 canvas 元素。
繪制圖片
一旦獲得了源圖對象，我們就可以使用 drawImage 方法將它渲染到 canvas 里。 drawImage 方法有三種形態，最常見的是：
drawImage(image,x,y)
其中 image 是image 或者 canvas 對象，x/y是目標在 canvas里的起始坐標。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image()
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://developer.mozilla.org/@api/deki/files/58/=Canvas_backdrop.png"
}
縮放 Scaling
drawImage 的第二種形態，增加了兩個用于控制圖像在 canvas 中的參數。
drawImage(image,x,y,width,height)
這個方法多了2個參數： width 和 height,這兩個參數用來控制當 canvas 畫入時應該縮放的大小。
切片 Slicing
drawImage 方法的第三個也是最后一個變種有8個新參數，用于控制做切片顯示的。
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
第一個參數是源圖像引入，后面的前4個是定義圖像源的切片位置和大小，后4個則是定義切片的目標顯示位置和大小。
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Draw slice
ctx.drawImage(document.getElementById('source'),
33,71,104,124,21,20,87,104);
}
