HTML5 canvas drawImage() 方法記錄

瀏覽器支持

Internet Explorer 九、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。
註釋：Internet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素。

定義和用法

drawImage() 方法在畫布上繪製圖像、畫布或視頻。
drawImage() 方法也可以繪製圖像的某些部分，以及/或者增長或減小圖像的尺寸。

JavaScript 語法 1

在畫布上定位圖像：

context.drawImage(img,sx,sy);

此時其餘的默認值爲：
swidth：畫布寬度
sheight：width/swidth*height
x：0
y：0
width：圖像的naturalWidth
height：圖像的naturalHeight

JavaScript 語法 2

在畫布上定位圖像，並規定圖像的寬度和高度：

context.drawImage(img,sx,sy,swidth,sheight);

此時其餘的默認值爲：
x：0
y：0
width：圖像的naturalWidth
height：圖像的naturalHeight

JavaScript 語法 3

剪切圖像，並在畫布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

---

參數值

img：規定要使用的圖像、畫布或視頻。
sx：可選。畫布中被繪製的區域的左上角的點的 x 值。
sy：可選。同上的 y 值。
swidth：可選。畫布中被繪製的區域的寬度。
sheight：可選。同上的高度。
x：圖像中，被選取的區域的左上角的點的 x 值。
y：同上的 y 值。
width：可選。圖像中，被截取的區域的寬度。
height：可選。同上的高度。

參數使用原理：參數分爲3部分，一部分描述圖像數據源，一部分描述從數據源中截取的區域（參數前無s標識的參數），一部分描述在畫板中繪製的區域（參數前有s標識的參數）。

簡單來說，此方法將從圖像中截取一個矩形區域來畫到畫板中的一個矩形區域，若是兩個矩形區域的數值不同，將對圖像進行縮放，甚至拉伸。

延伸使用方法：若是設置的畫板區域比畫板自己要大的時候，依然會按照上面的方式，把圖像延伸到畫板外，可是，在畫板外的圖像是不會繪製出來的。