如何快速封装uniapp Canvas组件，实现无脑绘制并保存小程序分享海报？

本文共计1978个文字，预计阅读时间需要8分钟。

目录+正文+配置项+一、使用+二、封装m-canvas组件+三、声明canvas.js，封装方法+正文+小程式分享海报想必大家都有做过，微信的限制，无法直接分享小程式到朋友圈，受限于微信的开发者工具。

目录

• 正文
• 配置项
• 一、使用
• 二、封装m-canvas组件
• 三、声明canvas.js，封装方法

正文

小程序分享海报想必大家都做过，受微信的限制，无法直接分享小程序到朋友圈（虽然微信开发者工具基础库从2.11.3开始支持分享小程序到朋友圈，但目前仍处于Beta中），所以生成海报仍然还是主流方式，通常是将设计稿通过canvas绘制成图片，然后保存到用户相册，用户通过图片分享小程序

但是，如果不是对canvas很熟悉的话，每次都要去学习canvas的Api，挺麻烦的。我只想“无脑”的完成海报的绘制，就像是把每一个元素固定定位一样，告诉它你要插入的是图片、还是文字，然后再传入坐标、宽高就能把在canvas绘制出内容。