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) ,那么最终被绘制的图片就是下图黑色填充区域