canvas图像操作

CanvasRenderingContext2D.drawImage()是 Canvas 2D API 中的方法,它提供了多种方式来在Canvas上绘制图像。

语法
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数
image
绘制到上下文的元素。允许任何的 canvas 图像源,例如:HTMLImageElement
,HTMLVideoElement
,或者 HTMLCanvasElement

dx
目标画布的左上角在目标canvas上 X 轴的位置。
dy
目标画布的左上角在目标canvas上 Y 轴的位置。
dWidth
在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片宽度不会缩放。
dHeight
在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片高度不会缩放。
sx
需要绘制到目标上下文中的,源图像的矩形选择框的左上角 X 坐标。
sy
需要绘制到目标上下文中的,源图像的矩形选择框的左上角 Y 坐标。
sWidth
需要绘制到目标上下文中的,源图像的矩形选择框的宽度。如果不说明,整个矩形从坐标的sx和sy开始,到图像的右下角结束。
sHeight
需要绘制到目标上下文中的,源图像的矩形选择框的高度。

你可能感兴趣的:(canvas图像操作)