大学生之家,大学生资讯发布平台
大学生之家

小程序画布绘制图像到画布CanvasContext.drawImage

    发布时间:2025-04-15    阅读:
    来源:大学生之家
CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
绘制图像到画布

小程序插件:支持
参数
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()
  }
})
计算机学习推荐
  • 扫一扫 分享悦读 ➤
  • 扫码可以分享到微信 qq朋友圈
计算机学习热点