小程序集成canvas绘制海报（附带完整源代码）

小程序使用canvas绘制海报

一、背景介绍

目标：利用canvas画布生成社团活动的海报图片，便于社团活动宣传以及对小程序的推广。

场景：用户A觉得某个社团的活动很不错，因此点击“分享”按钮，生成一个该活动的海报图片，接着，用户A把该图片发到某个群或者朋友圈进行传播，用户B看到该图片后对这个活动蛮感兴趣，通过长按识别图片中的小程序码，能够进入小程序的相应活动详情页。

二、海报原型图

三、canvas简介

• 这是微信官方对小程序canvas的画布的说明文档：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
• 利用canvas可以通过js代码控制画布中的内容，最后将画布保存为本地图片，获得用户相册授权后，图片还能保存到手机微信相册。

四、代码实现

完整代码：

（详细的代码注释都在代码里面）

案例一：

https://gitee.com/irjkz/xiaochengxujichengcanvas

案例二：

https://gitee.com/irjkz/xiaochengxujichengcanvasanli2