要添加画布，首先需要canvas组件才能在applet中执行绘制操作。 那么，首先在wxml代码中输入以下canvas。
canvas canvas-id=' share canvas ' style=' width :600 px； height:900px'/canvas现在有600x900个绘图区域。 然后，我们写JS代码在这个画布上进行绘制操作。
步骤1 )绘制背景图通过观察《长城你造不造》合成的共享图，可以分析其构成主要有以下三个部分。 大背景图，动态文字(xxxx叫你“一起献砖修长城”)，小程序代码图片。
那么，首先找图像作为背景图，画在画布上。 代码大致如下。
constwxgetimageinfo=promis ify (wx.getimage info ) wxgetimageinfo ({ src : ' http://some-domain/BG.png ' } ) . then (RES={ const CTX=wx.createcanvascontext (' share canvas ' ) CTX.drawimage ) RES.path，0，0，600，900 ) ctth
第二步)画个字吧。 继续在画布上画文字吧。 一般宣传用的共享图中，文字的说明是必不可少的。 另外，还有文章的作者、文章的标题、内容等由场景内容产生的动态信息。
试着在画布上添加中间显示的文字。 是“作者：一斤码”吗？ 还是根据上一个代码继续写：
constwxgetimageinfo=promis ify (wx.getimage info ) wxgetimageinfo ({ src : ' http://some-domain/BG.png ' } ) . then (RES={ const CTX=wx.createcanvascontext (' share canvas ' ) /参考底图CTX.drawimage(RES.path，0，0，600， 900(//作者名CTX.settextalign ) (center ) ) /以文字为中心CTX.setfillstyle ) (#000000 ) /文字颜色：黑色CTX.setfontsize ) )/500 ) ctx.stroke ) ctx.draw ) )在canvas上绘制字符不会自动折断行，因此绘制相对较长的文本时，可能会限制一行字符的数量，并将较长的文本拆分为几行。
步骤3 )在绘制小程序代码的末尾，在画布的末尾添加小程序代码。 可以是静态applet的代码，也可以是为每篇文章动态生成的applet的代码(请参见文章《微信小程序之生成自定义参数小程序二维码》 )。 无论如何，此applet的代码是图像，因此使用与绘制参考底图相同的方法绘制。 最后一个代码如下所示。
constwxgetimageinfo=promis ify (wx.getimage info ) promise.all [ wxgetimageinfo ({ src : ' http://some-domain.com API/generate/QRcode'} ) }.then ) RES={constCTX=wx.create}参考底图CTX.drawimage(RES[0].path，0，0，6660 ) 900(//作者名CTX.settextalign ) (center ) ) /以文字为中心CTX.setfillstyle ) (#000000 ) /文字颜色：黑色CTX.setfontsize ) ) /
保存到系统相册后，保存到用户的系统相册中，实现该功能。 主要依靠两个API:wx.canvastotempfilepath和wx.saveImageToPhotosAlbum。
主要流程是首先将在wx.canvasToTempFilePath中绘制在canvas上的图像生成为临时文件，然后在wx.saveImageToPhotosAlbum中保存到系统相册。
constwxcanvastotempfilepath=promis ify (wx.canvastotempfilepath ) constwxsaveimagetophotosalbum=promis ify ) wx.save imare ' sharecanvas '，this ).this ) RES={ returnwxsaveimagetophotosalbum } { filepaalbum }
其中promise.util.js如下：
将/** *的callback格式的API转换为Promise兼容格式*/module.exports={ promis ify : API={ return， params}={return} fail : reject } API ({ . options， extras }， params}}}