canvas海报

在推荐一个人人都说好用的canvas海报插件，画家计划直达git链接（内有文档）
关于各种是否立刻加载是否清楚这些，文档都有写，其中
通知外部绘制完成，重置isCanDraw为false
注意海报弹出关闭时这个变量的改变，如果需求不需要，可以忽略。

**

附赠个人用法

**
我先下载git链接里面的这些文件

然后个人再次封装一层

代码在这里
下面是page文件如何使用

<haibao imgData="{{imgData}}" id="shareBox" isCanDraw="{{isCanDraw}}" bing customStyle=' position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;background: rgba(0,0,0,0.44);z-index: 3;' bind:imgOk="imgOk" bind:clooseHaiBao="clooseHaiBao"></haibao>

this.setImgData();
setImgData() {
    let imgData = {
      imgDraw: {
        width: '500rpx',
        height: '820rpx',
        borderRadius: '0rpx',
        background: '#FFF',
        views: [{
          type: 'image',
          url: '/differentImg/applogo.jpg',
          css: {
            mode: 'aspectFill',
            top: '0rpx',
            left: '287rpx',
            width: '183rpx',
            height: '45rpx',
          }
        },
        {
          type: 'image',
          url: this.data.detail.bannerimages[0],
          css: {
            mode: 'aspectFill',
            top: '60rpx',
            left: '25rpx',
            width: '444rpx',
            height: '444rpx',
          }
        },
        {
          type: 'text',
          text: `￥${this.data.detail.minPrice ? this.data.detail.minPrice : '0'}`,
          css: {
            color: '#000000',
            top: '540rpx',
            left: '22rpx',
            fontSize: "40rpx",
            fontWeight: 'bold',
          }
        },
        {
          type: 'text',
          text: `￥${this.data.detail.price ? this.data.detail.price : '0'}`,
          css: {
            color: '#7D7D7D',
            top: '553rpx',
            left: `${priceRed}rpx`,
            fontSize: "20rpx",
            textDecoration:"line-through",
          }
        },
        {
          type: 'text',
          text: this.data.detail ? this.data.detail.title : '',
          css: {
            color: '#000000',
            top: '640rpx',
            width: '293rpx',
            maxLines: '2',
            lineHeight: '38rpx',
            left: '25rpx',
            fontSize: "22rpx",
          }
        },
        {
          type: 'image',
          url: this.data.vipinfoZy ? this.data.vipinfoZy.headImg : '/images/tabbar4A.png',
          css: {
            mode: 'aspectFill',
            top: '723rpx',
            left: '26rpx',
            width: '48rpx',
            height: '48rpx',
            borderRadius: '24rpx'
          }
        }, {
          type: 'text',
          text: this.data.vipinfoZy ? this.data.vipinfoZy.nikeName : '您的好友',
          css: {
            color: '#7D7D7D',
            top: '744rpx',
            left: '82rpx',
            fontSize: "18rpx",
            lineHeight: '28rpx',
          }
        }, {
          type: 'image',
          url: this.data.haibaoQr ? this.data.haibaoQr : '/images/fxhy.png',
          css: {
            mode: 'aspectFill',
            top: '566rpx',
            left: '344rpx',
            width: '125rpx',
            height: '125rpx',
          }
        }, {
          type: 'text',
          text:'长按图片',
          css: {
            color: '#707070',
            top: '707rpx',
            left: '374rpx',
            fontSize: "16rpx",
            lineHeight: '22rpx',
          }
        },{
          type: 'text',
          text:'查看商品详情',
          css: {
            color: '#707070',
            top: '726rpx',
            left: '358rpx',
            fontSize: "16rpx",
            lineHeight: '22rpx',
          }
        }]
      }
    };
    this.addimgData(imgData);
    this.setData({
      imgData: imgData,
      isCanDraw: true,
      iffx: false
    })
  },
  addimgData(imgData) {
    let tagarr = this.data.detail.shoppingServiceFlags,
      totalwidth = 22,//整行标签占用宽度
      beforeLeft = 22;//左边距的计算用的辅助宽度
    tagarr.forEach((v, k) => {
      if (v.name) {
        let textWidth = v.name.length * 17 + 7 * k;//每个小标签的宽度
        totalwidth += textWidth;
        if (totalwidth > 320) {//标签过多则不再追加，宽度足够即可
          return
        };
        let addobj = {
          type: 'text',
          text: v.name,
          css: {
            color: '#AAAAAA',
            top: '597rpx',
            left: `${beforeLeft}rpx`,
            width: `${textWidth}rpx`,
            fontSize: "15rpx",
            background: '#eee',
            lineHeight: '20rpx',
            textAlign:'center'
          }
        };
        let apilceindex1 = 3 + k;
        imgData.imgDraw.views.splice(apilceindex1, 0, addobj);
        beforeLeft += (textWidth+7);
      };
    });
    // return addobjarr;
  },