瀏覽器支持
Internet Explorer 9、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
標識的參數)。簡單來講,此方法將從圖像中截取一個矩形區域來畫到畫板中的一個矩形區域,如果兩個矩形區域的數值不一樣,將對圖像進行縮放,甚至拉伸。
延伸使用方法:如果設置的畫板區域比畫板本身要大的時候,依然會按照上面的方式,把圖像延伸到畫板外,但是,在畫板外的圖像是不會繪製出來的。