drawImage
2023年08月12日
一、认识
ctx.drawImage 方法提供了多种在画布（Canvas）上绘制图像的方式。
二、语法
drawImage(image, dx, dy);
drawImage(image, dx, dy, dWidth, dHeight);
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-
image: 绘制到上下文的元素。允许任何的画布图像源，例如：HTMLImageElement、SVGImageElement (en-US)、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas或VideoFrame(en-US)。 -
sx: 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角X轴坐标。可以使用3参数或5参数语法来省略这个参数。 -
sy: 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角Y轴坐标。可以使用3参数或5参数语法来省略这个参数。 -
sWidth: 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。可以使用3参数或5参数语法来省略这个参数。使用负值将翻转这个图像。 -
sHeight: 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。使用负值将翻转这个图像。 -
dx:image的左上角在目标画布上X轴坐标。 -
dy:image的左上角在目标画布上Y轴坐标。 -
dWidth:image在目标画布上绘制的宽度。允许对绘制的image进行缩放。如果不说明，在绘制时image宽度不会缩放。注意，这个参数不包含在3参数语法中。 -
dHeight:image在目标画布上绘制的高度。允许对绘制的image进行缩放。如果不说明，在绘制时image高度不会缩放。注意，这个参数不包含在3参数语法中。