背景：

在canvas的开发中总会碰到drawImage这个API，但是里面有9个参数，具体代表什么意思有时候会把自己搞混乱了，特此记录一下，加深影响。

使用方式：

context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

说明：

img

就是图片对象，可以是页面上获取的 DOM 对象，也可以是虚拟 DOM 中的图片对象。

dx、dy、dWidth、dHeight

表示在 canvas 画布上规划出一片区域用来放置图片，dx, dy 为绘图位置在 Canvas 元素的 X 轴、Y 轴坐标，dWidth, dHeight 指在 Canvas 元素上绘制图像的宽度和高度（如果不说明，在绘制时图片的宽度和高度不会缩放）。

sx、sy、swidth、sheight

这 4 个参数是用来裁剪源图片的，表示图片在 canvas 画布上显示的大小和位置。sx, sy 表示在源图片上裁剪位置的 X 轴、Y 轴坐标，然后以 swidth, sheight 尺寸来选择一个区域范围，裁剪出来的图片作为最终在 Canvas 上显示的图片内容（ swidth, sheight 不说明的情况下，整个矩形（裁剪）从坐标的 sx 和 sy 开始，到图片的右下角结束）。

以下为图片绘制的实例：

context.drawImage(image, 0, 0, 100, 100);

context.drawImage(image, 300, 300, 200, 200);

context.drawImage(image, 0, 100, 150, 150, 300, 0, 150, 150);

页面效果如下：

Api 中奇怪之处在于，sx、sy、swidth、sheight 为选填参数，但位置在 dx、dy、dWidth、dHeight 之前。