好的我們開始，uniapp繪製海報進行保存是我們經常需要製作的功能。而繪製海報，我們一般會繪製圖片，繪製文字，繪製截取圖片。
下面讓我們來看下繪製一個海報的具體過程。
初始化畫布（這裏的this必不可少，否則在某些情況下會產生繪製失敗的bug）
<canvas class="canvas" canvas-id="myCanvas"></canvas>
const ctx = uni.createCanvasContext('myCanvas',this);
1、首先我們需要繪製圖片
在canvas上繪製圖片。我們需要用到一下代碼
ctx.drawImage( 圖片路徑 , x軸位置 , y軸位置 , 寬度 , 高度 ); //繪製圖
而該方法只支持繪製本地圖片，包括本地臨時文件。
所以當你要繪製一張網絡圖片時，
H5端和app端getImageInfo得到的返回信息不同。
你需要使用到一下代碼方法：
new Promise(resolve => {
uni.getImageInfo({
src: '網絡圖片',
success(res)
ctx.drawImage(res.path, 0, 0, 244 * 1.22, 429 * 1.22);//繪製圖
resolve()
} ,
fail(){
_this.canvasFlag=true;
uni.showToast({title:'海報生成失敗',duration:2000,icon:'none'});
}
})
})
通過該方法將將網絡圖片轉成本地臨時文件路徑（App才能轉成本地臨時路徑），然後然後再執行ctx.drawImage()方法進行繪製。
我這邊使用到了promise是爲了在圖片繪製完後在繪製文字，好我們進行下一步。
2、繪製文字
ctx.setFillStyle('#999999')//文字顏色：默認黑色
ctx.setFontSize(12)//設置字體大小，默認10
ctx.textAlign = 'center' // 設置位置
ctx.font = 'normal 12px sans-serif'; // 字體樣式
ctx.fillText(文字內容 , 寬度, 高度);
3、最後執行繪製方法
ctx.draw()
到這我們就已經完成繪製。
4、保存畫布
uni.canvasToTempFilePath({ // 把畫布轉化成臨時文件
x: 0,
y: 0,
width:244 * 1.22, // 截取的畫布的寬
height: 429 * 1.22, // 截取的畫布的高
destWidth: 244 * 1.22 * 3, // 保存成的畫布寬度
destHeight: 429 * 1.22 * 3, // 保存成的畫布高度
fileType: 'jpg', // 保存成的文件類型
quality: 1, // 圖片質量
canvasId: 'myCanvas', // 畫布ID
success(res) {
// 2-保存圖片至相冊
uni.saveImageToPhotosAlbum({ // 存成圖片至手機
filePath: res.tempFilePath,
success(res2) {
wx.hideLoading();
uni.showToast({title: '圖片保存成功，可以去分享啦~', duration: 2000})
_this.canvasCancelEvn();
},
fail(res3) {
if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
_this.$store.dispatch('SetPhoneShow',1)
uni.showToast({title: '保存失敗，稍後再試', duration: 2000,icon:'none'})
wx.hideLoading();
}else{
uni.showToast({title: '保存失敗，稍後再試', duration: 2000,icon:'none'})
wx.hideLoading();
}
}
})
},
fail() {
uni.showToast({title: '保存失敗，稍後再試',duration: 2000,icon:'none'})
wx.hideLoading();
}
})
5、這裏詳細講一下一些方法的具體功能和細節
1、繪製方法
ctx.draw()
這個方法是繪製方法，在你繪圖或者繪製文字結束後需要調用該方法，你所做的操作才能繪製到canvas標籤上。
擔有幾個注意的點，首先.draw()會先清空canvas標籤上繪製圖案，draw(true)就能夠保存canvas上已經繪製繪製完成的內容，然後繼續繪製。
2、canvas區域截取區域，繪製。常用於繪製圓形頭像會用到。
截取區域前需要使用.save()方法進行之前畫布區域的保存，然後.clip()截取後進行你想要的操作，操作完後使用.restore()對畫布區域進行恢復。
ctx.save() // 對當前畫布區域進行保存
ctx.clip() // 剪切，剪切之後的繪畫繪製剪切區域內進行，需要save與restore 這個很重要 不然沒辦法保存
ctx.restore() // 對畫布區域進行恢復
3、
ctx.measureText('文字').width // 獲取該段字符串在canvas上的寬度，用於短句。