微信小程序使用canvas绘图，并保存下载到本地。圆形头像，虚线网络图片

 

 wxml

<button class="btn"  type="primary" form-type="submit" bindtap="shareShow">分享</button> 

<canvas type="2d" id="shareCanvas" style="height: 1372rpx;width:728rpx;position: fixed;z-index: -100; left: -99999rpx"></canvas>

<view class="share-mask" wx:if="{ {share}}" bindtap="hideshareShow">
    <image src="{ {canvasImg}}" mode='widthFix' style="width: 600rpx;height:1644rpx;border-radius:20rpx;" show-menu-by-longpress="true"></image>
    <button class="downLoad-btn" catchtap="download">下载图片</button>
</view>

data: {
        canvasImg: '',
        share: false, //是否分享
        base64Qr:'',//二维码接口获取的base64的图片
        drawing: false, //是否绘制海报中
        loading: false, //点击分享时，是否绘制海报中
        picInvitebg2:"https://wechat/static/pages_ailive/invitebg2.png"//网络图片
    },

//显示遮罩层
    shareShow() {
        setTimeout(() => {         
                this.setShareCanvas();// 分享绘图
        }, 800)
        this.setData({
            loading: true
        })
        wx.showLoading({
            title: '海报生成中',
        })
    },  

setShareCanvas() {
        const self = this;
        const info = this.data.info;
        const query = wx.createSelectorQuery();
        query.select('#shareCanvas')
            .fields({
                node: true,
                size: false
            }).exec((res) => {
                const canvas = res[0].node;
                const ctx = canvas.getContext('2d');
                canvas.width = 728;
                canvas.height = 1372;
                self.setData({
                    drawing: true,
                })
                new Promise(function (resolve) {
                    // 绘制背景图片
                    wx.getImageInfo({
                        src: self.data.picInvitebg2, //网络图片
                        success(res) {
                            const img = canvas.createImage();
                            img.src