如何详细解析小程序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 元素) 。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坐标的偏移量）的宽度和高度值。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。