uniapp微信小程序canvas生成简单海报并下载

今天项目接到个任务，就是手写canvas海报，并能下载图片。百度了很多海报组件，都不尽人意。萌生了自己手写海报的想法。

话不多说先贴文档 uni-app官网

其实该文档和微信小程序类似

最终效果，微信小程序可用，一个一个代码敲出来的。只要把原理掌握了，任何海报都能迎刃而解

1.准备环境

因为海报涉及到第三方的图片存储地址，所以要加白名单

downloadFile 里加你海报的根域名

 记住一定要在这看看有没有加好白名单，刷新一下要不然还是会加载中空白的效果

话不多说上代码

解读代码块1

// 加微信头像
					context.save()  // 对当前画布区域进行保存
					context.beginPath()
					context.arc(185, 160, 50, 0, 2 * Math.PI)
					context.clip()
					let touImg = await this.getImageInfo(this.touimg)
					context.drawImage(touImg.tempFilePath, 135, 110)					 
					context.restore()  //对其进行恢复

 如果想要让将图片转为圆，并且居中，context.arc(185, 160, 50, 0, 2 * Math.PI)这个方法是关键

因为画布为370px，所以我的X轴坐标 一定为185，Y轴的话看需求但是一定要大于半径（50px）。

我的圆半径为50，想象成一个正方形，它的右上角点的X轴位置就是185-50=185，Y轴160-50=110所以context.drawImage(touImg.tempFilePath, 135, 110)    就得这样写

解读代码块2

// 加活动标题
					context.beginPath()
					context.setFontSize(25)
					context.setFillStyle('#ffffff')
					context.setTextAlign('center')
					context.fillText(this.title, 185,80)

如果想让字体居中显示，你的字体偏移量记得也得偏移到中间

 话不多说上代码

第二次更新，升级版，适应当前手机屏幕,夹杂其他代码仅供参考