最近在開發(fā)小程序，海報(bào)生成的過程中，要在carvas中不斷去添加圖片，對小程序的drawImage參數(shù)不是很明確，這次解惑。

從事成都服務(wù)器托管，服務(wù)器租用，云主機(jī)，虛擬空間，國際域名空間，CDN，網(wǎng)絡(luò)代維等服務(wù)。

示例代碼

有三個(gè)版本的寫法：

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()
 }
})

這個(gè)方法跟原生canvas的一樣，具體如下

HTML5中引入新的元素canvas，其drawImage 方法允許在 canvas 中插入其他圖像( img 和 canvas 元素) 。drawImage函數(shù)有三種函數(shù)原型：

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一個(gè)參數(shù)image是所要繪制的圖片資源

作為參數(shù)。dx和dy是image在canvas中定位的坐標(biāo)值；dw和dh是image在canvas中即將繪制區(qū)域（相對dx和dy坐標(biāo)的偏移量）的寬度和高度值；sx和sy是image所要繪制的起始位置，sw和sh是image所要繪制區(qū)域（相對image的sx和sy坐標(biāo)的偏移量）的寬度和高度值。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。