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

示例代碼

有三個(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ū)域（相對(duì)dx和dy坐標(biāo)的偏移量）的寬度和高度值；sx和sy是image所要繪制的起始位置，sw和sh是image所要繪制區(qū)域（相對(duì)image的sx和sy坐標(biāo)的偏移量）的寬度和高度值。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。