好的我们开始，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上的宽度，用于短句。