# CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

小程序插件:支持

相关文档: 画布指南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()
  }
})