您現(xiàn)在的位置： 365建站網(wǎng) > 建站教程 > JavaScript 教程 > HTML DOM drawImage() 方法

HTML DOM drawImage() 方法

此節(jié)有 246 人學(xué)習(xí)過(guò) 參與評(píng)論

HTML DOM CanvasRenderingContext2D 對(duì)象

定義和用法

drawImage() 方法繪制一幅圖像。

語(yǔ)法

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 對(duì)象，或者是 Canvas 元素。
x, y	要繪制的圖像的左上角的位置。
width, height	圖像所應(yīng)該繪制的尺寸。指定這些參數(shù)使得圖像可以縮放。
sourceX, sourceY	圖像將要被繪制的區(qū)域的左上角。這些整數(shù)參數(shù)用圖像像素來(lái)度量。
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ù)制到畫布，但是允許您用畫布單位來(lái)指定想要的圖像的寬度和高度。第三個(gè)變形則是完全通用的，它允許您指定圖像的任何矩形區(qū)域并復(fù)制它，對(duì)畫布中的任何位置都可進(jìn)行任何的縮放。

傳遞給 drawImage() 方法的圖像必須是 Image 對(duì)象或 Canvas 元素。一個(gè) Image 對(duì)象能夠表示文檔中的一個(gè) <img> 標(biāo)記或者使用 Image() 構(gòu)造函數(shù)所創(chuàng)建的一個(gè)屏幕外圖像。