canvas.drawImage()方法详解

首先看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确定何时准备就绪。

巴特西

canvas.drawImage()方法详解

抛出异常

最新文章

热门文章