摘要：瀏覽器支持以及支持方法。定義和用法方法在畫布上繪制圖像畫布或視頻。方法也能夠繪制圖像的某些部分，以及或者增加或減少圖像的尺寸。圖像中，被截取的區(qū)域的寬度。

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

drawImage() 方法在畫布上繪制圖像、畫布或視頻。
drawImage() 方法也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸。

JavaScript 語(yǔ)法 1

在畫布上定位圖像：

context.drawImage(img,sx,sy);

此時(shí)其他的默認(rèn)值為：
swidth：畫布寬度
sheight：width/swidth*height
x：0
y：0
width：圖像的naturalWidth
height：圖像的naturalHeight

JavaScript 語(yǔ)法 2

在畫布上定位圖像，并規(guī)定圖像的寬度和高度：

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

此時(shí)其他的默認(rèn)值為：
x：0
y：0
width：圖像的naturalWidth
height：圖像的naturalHeight

JavaScript 語(yǔ)法 3

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

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

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

參數(shù)使用原理：參數(shù)分為3部分，一部分描述圖像數(shù)據(jù)源，一部分描述從數(shù)據(jù)源中截取的區(qū)域（參數(shù)前無(wú)s標(biāo)識(shí)的參數(shù)），一部分描述在畫板中繪制的區(qū)域（參數(shù)前有s標(biāo)識(shí)的參數(shù)）。

簡(jiǎn)單來(lái)講，此方法將從圖像中截取一個(gè)矩形區(qū)域來(lái)畫到畫板中的一個(gè)矩形區(qū)域，如果兩個(gè)矩形區(qū)域的數(shù)值不一樣，將對(duì)圖像進(jìn)行縮放，甚至拉伸。

延伸使用方法：如果設(shè)置的畫板區(qū)域比畫板本身要大的時(shí)候，依然會(huì)按照上面的方式，把圖像延伸到畫板外，但是，在畫板外的圖像是不會(huì)繪制出來(lái)的。