uniapp canvas绘图流程，从绘制图案到绘制文字，然后完成。还有一些方法的具体细节。

好的我们开始，uniapp绘制海报进行保存是我们经常需要制作的功能。而绘制海报，我们一般会绘制图片，绘制文字，绘制截取图片。

下面让我们来看下绘制一个海报的具体过程。

初始化画布（这里的this必不可少，否则在某些情况下会产生绘制失败的bug）

<canvas class="canvas" canvas-id="myCanvas"></canvas> const ctx =
uni.createCanvasContext('myCanvas',this);

1、首先我们需要绘制图片

在canvas上绘制图片。我们需要用到一下代码

ctx.drawImage( 图片路径 , x轴位置 , y轴位置 , 宽度 , 高度 );		//绘制图

而该方法只支持绘制本地图片，包括本地临时文件。
所以当你要绘制一张网络图片时，
小程序端和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上已经绘制绘制完成的内容，然后继续绘制。

ctx.draw(true, () => {
	// 方法内容
}) 

ctx.draw()方法第二个参数可以设置一个回调方法，在绘制完后进行方法体中的内容操作。
例如进行：canvas的截取等等。

2、canvas区域截取区域，绘制。常用于绘制圆形头像会用到。

截取区域前需要使用.save()方法进行之前画布区域的保存，然后.clip()截取后进行你想要的操作，操作完后使用.restore()对画布区域进行恢复。

ctx.save()	// 对当前画布区域进行保存
ctx.clip() 	// 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
ctx.restore()	// 对画布区域进行恢复

3、

ctx.measureText('文字').width	// 获取该段字符串在canvas上的宽度，用于短句。