uni保存canvas图片_uni-app使用Canvas绘图

最近公司项目在用uni-app做小程序商城，其中商品和个人需要生成图片海报，经过摸索记录后将一些重点记录下来。这里有两种方式来生成

1、后台控制生成

2、前端用canvas合成图片

这里我们只讲使用canvas合成图片的方法，canvas包括绘制文字、图片、图形以及图片显示处理。

一、初始化canvas画布

通过createCanvasContext方法来创建画布

var _this = this;

_this.ctx = uni.createCanvasContext('canvasid', this);

const C_W = 650; //canvas宽度，使用的手机屏幕

_this.canvasW = C_W; //

_this.canvasH = 420; // 设置画布高度

_this.ctx.setFillStyle('#545a7a'); //canvas背景颜色

_this.ctx.fillRect(0, 0, _this.canvasW, _this.canvasH); //canvas画布大小

二、画布绘制文字

画布绘制完成后就需要我们把海报需要的元素绘制到画布上，第一步：添加店铺名称，ShopName为定义的店铺名称或者说推广人名称，店铺名称，店铺名称显示使用文字处理：

文字排列方式包含：

1、textAlign = 'start'

2、textAlign = 'end'

3、textAlign = 'left'

4、textAlign =