CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致
从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替
小程序插件:支持
相关文档: 旧版画布迁移指南、canvas 组件介绍
功能描述
绘制图像到画布
参数
string imageResource
所要绘制的图片资源(网络图片要通过 getImageInfo / downloadFile 先下载)
number sx
需要绘制到画布中的,imageResource的矩形(裁剪)选择框的左上角 x 坐标
number sy
需要绘制到画布中的,imageResource的矩形(裁剪)选择框的左上角 y 坐标
number sWidth
需要绘制到画布中的,imageResource的矩形(裁剪)选择框的宽度
number sHeight
需要绘制到画布中的,imageResource的矩形(裁剪)选择框的高度
number dx
imageResource的左上角在目标 canvas 上 x 轴的位置
number dy
imageResource的左上角在目标 canvas 上 y 轴的位置
number dWidth
在目标画布上绘制imageResource的宽度,允许对绘制的imageResource进行缩放
number dHeight
在目标画布上绘制imageResource的高度,允许对绘制的imageResource进行缩放
示例代码
有三个版本的写法:
- 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()
}
})
