微信小程序-画布canvas绘制分享海报（附带水滴码）

# 画布绘制前先避坑！！！ wx.createCanvasContext此接口已停止维护

这里不是不能用了，而是以后万一哪天废弃了，代码就要重新写...

微信基础库版本分布-用户量 基础库 / 版本分布 (qq.com)  

2.9.0估计用户量 0.35%左右

原图链接：画布 / wx.createCanvasContext (qq.com)

建议使用 SelectorQuery 获取。developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html

官方代码示例这些 Canvas 小技巧，保证你新年用得上 | 微信开放社区 (qq.com)

其中：
// 获取设备像素比
const dpr = wx.getSystemInfoSync().pixelRatio //此接口停止维护了、
需要使用：
const dpr = wx.getWindowInfo().pixelRatio //获取设备像素比
基础 / 系统 / wx.getWindowInfo (qq.com)

为什么要写这行代码呢？

如果不写这行代码，画布整体会很模糊，获取了设备像素比后，可以使用上面的方式设置画布宽高，以及需要在画布上绘制的图片或者文案的位置及宽高。

也可以编写一个function，因为画布的长度单位是px，不是微信的rpx，所以需要转化一下。
屏幕整体宽度 W ：750rpx
通过微信接口获取的屏幕宽度 SW： wx.getWindowInfo().screenWidth //屏幕宽度，单位px
设备像素比 R：wx.getWindowInfo().pixelRatio //获取设备像素比
我们定义的画布宽度 CW ：例如500rpx
function:  ((CW/W) * R) * SW 最后得出单位为px的画布宽度（使用不同像素比的设备，画布清晰，而且宽度占比一致，高度只需把CW替换即可，例如高度600rpx，((600/W) * R) * SW）
为什么高度，也用宽度的计量公式，因为不同设备的高度不一，而宽度是750rpx固定的，无论多宽都是750rpx。

画布上绘制图片和文字，根据代码书写的先后，在下方代码的层级高于在上方的代码，类似z-index。

图片1
文字1
图片2
层级：图片2>文字1>图片1

最后微信不支持引导用户分享朋友圈，需要把我们绘制好的画布，下载到用户手机本地，让用户自主分享到朋友圈，保存图片到本地在上一篇文章，大家可以参考一下。
画布图片导出画布 / wx.canvasToTempFilePath (qq.com)