uniapp Canvas绘制海报

在绘制的过程中可能会需要文字换行
文字换行在我上篇文章，链接：文字换行.
之前写过一个分享海报，但是觉得代码逻辑不清晰所以重新写一个
我们的需求是这样子的

<view class="w-100 flex-column align-items-center" style="background:transparent !important;">
	<canvas id="mycanvas" canvas-id="mycanvas" style="width:270px;height:390px;background:#fff;"></canvas>
	<view @click="upLoadImg" >
		保存图片
	</view>
</view>

//canvas绘制部分
let ctx = uni.createCanvasContext('mycanvas', this);  // 创建canvas对象
// 这里注意的是网络图片需要用 uni.getImageInfo() 函数去下载下来才能进行绘制
			uni.getImageInfo({
				src: _this.detail.image,
				success(res) {
					// 下面的ckjg_width jtjg_width的宽度需要写在所在save的之前不然用的是save之后的样式去计算的宽度
					// 标题图片
					ctx.drawImage('../../static/image/canvas/real_title.png', 0, 0, 270, 40);
					// 小区图片
					ctx.drawImage(res.path, 15, 50, 240, 120);
					// 小区房子
					ctx.setFontSize(16);
					ctx.setFillStyle('#333333');
					ctx.font = 'normal bold 20px sans-serif';
					ctx.fillText(_this.detail.name, 15, 195, 240);
					ctx.save();
					// 小区地址
					ctx.setFontSize(12);
					ctx.setFillStyle('#4F4F4F');
					ctx.fillText(_this.detail.city + ' ' + _this.detail.area + ' ' + _this.detail.address, 15, 220, 240);
					ctx.save();
					// 参考价格
					ctx.setFontSize(12);
					ctx.setFillStyle('#4F4F4F');
					ctx.drawImage(res.path, 15, 50, 215, 110);
					ctx.fillText('参考价格：', 15, 245, 240);
					var ckjg_width = ctx.measureText('参考价格：').width;
					ctx.save();
					// 具体价格
					ctx.setFontSize(18);
					ctx.setFillStyle('#F2994A');
					ctx.fillText(_this.detail.averagePrice, ckjg_width + 10, 245, 240);
					var jtjg_width = ctx.measureText(_this.detail.averagePrice).width;
					ctx.save();
					// 长按识别
					ctx.setFontSize(16);
					ctx.setFillStyle('#333333');
					ctx.fillText('长按识别', 15, 310, 215);
					ctx.save();
					// 长按识别
					ctx.setFontSize(16);
					ctx.setFillStyle('#333333');
					ctx.fillText('小程序二维码', 15, 340, 215);
					ctx.save();
					// 二维码图片 （这里的二维码有可能需要小程序活码，需要活码的看21.10.10之后的文章，会分享小程序活码的案例）
					ctx.drawImage('../../static/image/canvas/code.png', 160, 270, 100, 100);
					// 这里是在信息绘制成功后去把canvas转换成图片保存起来
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'mycanvas',
							fileType: 'jpg',
							success(r) {
								_this.imgPath = r.tempFilePath;
							},
							fail(err) {
								console.log(err, 'err');
							}
						});
					}, 100);
					ctx.draw();
					console.log('绘制完成');
				}
			});

// 这里是点击保存图片按钮
// 用到了上面方法保存下来的图片路径
		upLoadImg() {
			var that = this;
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success(e) {
					uni.saveImageToPhotosAlbum({
						filePath: that.imgPath,
						success: function(r) {
							that.$u.toast('保存成功');
							that.canvasShow = false;
						},
						fail: function(err) {
							console.log(err, '方法错误');
						}
					});
				},
				fail: function(err) {
					console.log(err, '权限错误');
				}
			});
		},