如何详细解析小程序canvas的drawImage方法参数使用？

本文共计388个文字，预计阅读时间需要2分钟。

在最新开发的小程序中，海报生成过程中，需要在Canvas中不断添加图片。由于小程序的drawImage参数不够明确，本次遇到困惑。以下提供示例代码和三种版本写法：

1. 基本写法：javascriptdrawImage(imageResource, dx, dy);

2. 细化写法，包含图片宽高：javascriptdrawImage(imageResource, dx, dy, dWidth, dHeight);

3. 完整写法，包含源图片坐标和尺寸：javascriptdrawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

最近在开发小程序，海报生成的过程中，要在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 元素) 。