小程序 CanvasContext.drawImage 参数详解

CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)；
官方给出的参考文档有三个版本的写法

drawImage(imageResource, dx, dy)
drawImage(imageResource, dx, dy, dWidth, dHeight)
drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持

坑人的是对每个参数的解释模糊不清，

imageResource表示图片资源，不可为网络图片，需要使用的需要先把图片下载到本地
sx：表示你要绘制的图像的开始截取x坐标
sy：表示你要绘制的图像的开始截取y坐标
sWidth：表示你想要截取多宽的图片进行绘制
sHeight：表示你想要的截取高的图片进行绘制
比如我想要绘制一个100*100的图片，现在将参数设置为drawImage(imageResource, 10, 10, 30, 30, dx, dy, dWidth, dHeight) ，那么最终被绘制的图片就是下图黑色填充区域

dx：表示你要在开始绘制的canvas画布的x起点
dy：表示你要在开始绘制的canvas画布的y起点
dWidth：表示你在x轴预留出多少宽度来绘制图片
dHeight：表示你在y轴预留出多少高度来绘制图片

假如我有一个3030的画布
依然以刚才绘制的100100的图片为例，现在将参数设置为drawImage(imageResource, 10, 10, 30, 30, 0, 0, 30, 30) ，那么最终被绘制的图片就是下图黑色填充区域