最近在開發小程序，海報生成的過程中，要在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坐標的偏移量）的寬度和高度值。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。