html5 drawimage参数,小程序中canvas的drawImage方法参数详解

最近在开发小程序，海报生成的过程中，要在carvas中不断去添加图片，对小程序的drawImage参数不是很明确，这次解惑。

示例代码

有三个版本的写法：

drawImage(imageResource, dx, dy)

drawImage(imageResource, dx, dy, dWidth, dHeight)

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

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({

success: function(res){

ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)

ctx.draw()

}

})

这个方法跟原生canvas的一样，具体如下

HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：

drawImage(image, dx, dy)

drawImage(image, dx, dy, dw, dh)

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一个参数image是所要绘制的图片资源

作为参数。dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域(相对dx和dy坐标的偏移量)的宽度和高度值；sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域(相对image的sx和sy坐标的偏移量)的宽度和高度值。