HTML DOM drawImage() 方法
定義和用法
drawImage() 方法繪制一幅圖像。
語法
drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight)
參數(shù)
| 參數(shù) | 描述 |
|---|---|
| image | 所要繪制的圖像。 這必須是表示 <img> 標(biāo)記或者屏幕外圖像的 Image 對象，或者是 Canvas 元素。 |
| x, y | 要繪制的圖像的左上角的位置。 |
| width, height | 圖像所應(yīng)該繪制的尺寸。指定這些參數(shù)使得圖像可以縮放。 |
| sourceX, sourceY | 圖像將要被繪制的區(qū)域的左上角。這些整數(shù)參數(shù)用圖像像素來度量。 |
| sourceWidth, sourceHeight | 圖像所要繪制區(qū)域的大小，用圖像像素表示。 |
| destX, destY | 所要繪制的圖像區(qū)域的左上角的畫布坐標(biāo)。 |
| destWidth, destHeight | 圖像區(qū)域所要繪制的畫布大小。 |
描述
drawImage() 方法有 3 個(gè)變形。第一個(gè)變形把整個(gè)圖像復(fù)制到畫布，將其放置到指定點(diǎn)的左上角，并且將每個(gè)圖像像素映射成畫布坐標(biāo)系統(tǒng)的一個(gè)單元。第二個(gè)變形也把整個(gè)圖像復(fù)制到畫布，但是允許您用畫布單位來指定想要的圖像的寬度和高度。第三個(gè)變形則是完全通用的，它允許您指定圖像的任何矩形區(qū)域并復(fù)制它，對畫布中的任何位置都可進(jìn)行任何的縮放。
傳遞給 drawImage() 方法的圖像必須是 Image 對象或 Canvas 元素。一個(gè) Image 對象能夠表示文檔中的一個(gè) <img> 標(biāo)記或者使用 Image() 構(gòu)造函數(shù)所創(chuàng)建的一個(gè)屏幕外圖像。