首先看html5.js
/**
@param {Element} img_elem
@param {Number} dx_or_sx
@param {Number} dy_or_sy
@param {Number} [dw_or_sw]
@param {Number} [dh_or_sh]
@param {Number} [dx]
@param {Number} [dy]
@param {Number} [dw]
@param {Number} [dh]
*/
CanvasRenderingContext2D.prototype.drawImage = function(img_elem,dx_or_sx,dy_or_sy,dw_or_sw,dh_or_sh,dx,dy,dw,dh) {};
再底層
drawImage(image: HTMLElement, offsetX: number, offsetY: number, width?: number, height?: number, canvasOffsetX?: number, canvasOffsetY?: number, canvasImageWidth?: number, canvasImageHeight?: number): void;
其實平時調用支持三種傳參
void ctx.drawImage(image, dx, dy);//dx,dy決定了生成的圖像與畫布的間隔距離 void ctx.drawImage(image, dx, dy, dWidth, dHeight);//dWidth, dHeight決定了生成圖片的寬高，默認是img.width,img.height
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);// dWidth, dHeight是對生成圖片的縮放值
-
image -
繪制到上下文的元素。允許任何的 canvas 圖像源(
CanvasImageSource)，例如：CSSImageValue，HTMLImageElement，SVGImageElement，HTMLVideoElement，HTMLCanvasElement，ImageBitmap或者OffscreenCanvas。 -
dx - 目標畫布的左上角在目標canvas上 X 軸的位置。生成圖像與畫布坐標第一象限的間隔（y軸）
-
dy - 目標畫布的左上角在目標canvas上 Y 軸的位置。生成圖片與畫布坐標第四象限的間隔（x軸）
-
dWidth可選 - 在目標畫布上繪制圖像的寬度。 允許對繪制的圖像進行縮放。 如果不說明， 在繪制時圖片寬度不會縮放。
-
dHeight可選 - 在目標畫布上繪制圖像的高度。 允許對繪制的圖像進行縮放。 如果不說明， 在繪制時圖片高度不會縮放。
-
sx可選 - 需要繪制到目標上下文中的，源圖像的矩形選擇框的左上角 X 坐標。
-
sy可選 - 需要繪制到目標上下文中的，源圖像的矩形選擇框的左上角 Y 坐標。
-
sWidth可選 - 需要繪制到目標上下文中的，源圖像的矩形選擇框的寬度。如果不說明，整個矩形從坐標的sx和sy開始，到圖像的右下角結束。
-
sHeight可選 - 需要繪制到目標上下文中的，源圖像的矩形選擇框的高度。
拋出異常
-
INDEX_SIZE_ERR - 如果 canvas 或者圖像矩形區域的寬度或高度為0 。
-
INVALID_STATE_ERR - 圖像沒有數據。
-
TYPE_MISMATCH_ERR - 提供的原始元素不支持。
-
NS_ERROR_NOT_AVAILABLE -
圖像尚未加載。使用
.complete === true和.onload確定何時准備就緒。