微信小程序Canvas制作海报

前言：在微信小程序中，很多都需要分享，有些利用小程序本身的button按钮open-type=share的功能调用小程序原生的分享功能。
但有些时候做宣传时，要用到海报这种东西，这个时候就需要用到canvas去绘制一张海报
简单的海报，只有一张背景图和一张二维码，就以此为例

上图预览

1.首先在wxml中需要写入canvas标签

<canvas type="2d" id='myCanvas' class="myCanvas"></canvas>

如果标签中有type=2d，那么只需要写id=”myCanvas”即可，或者也可以写成下边的标签

<canvas canvas-id='myCanvas' class="myCanvas"></canvas>

这两种不同的写法，js中的用法也不同; 本文章主要使用方法一；

2.在wxss中给canvas样式定义宽高

.myCanvas {
  width: 576rpx;
  height: 854rpx;
  border-radius: 10rpx;
  border:1rpx solid #212121;
}

3. js中绘制canvas

drawCanvas: function(){
  var  that = this ;
  wx.showLoading({ //  给海报生成做个loading提示
      title: '海报生成中',
      icon: "loading"
  })
  const query = wx.createSelectorQuery();
  query.select('#myCanvas')  //获取canvas#myCanvas节点
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio; //获取设备像素比
        ctx.scale(dpr, dpr) // 设置画布的像素比，解决画布绘制不清晰的问题
        canvas.width = res[0].width * dpr  //重新设置画布的宽度
        canvas.height = res[0].height * dpr  //重新设置画布的高度
        let seal = canvas.createImage(); //创建背景图片对象
        seal.src = "https://image--ccccc.oss-cn-hangzhou.aliyuncs.com/bsd/ccccc.png"; // 赋值图片路径
        seal.onload = () => {
          //在图片加载后将其绘制在画布上
          //ctx.drawImage('图片路径','起点横坐标','起点纵坐标','终点横坐标','终点纵坐标')；起点与终点坐标来确定画布上图片的位置与大小；
          ctx.drawImage(seal, 0, 0, canvas.width, canvas.height);
          let qr = canvas.createImage(); //创建二维码图片对象
          qr.src = 'https://me--images.oss-cn-chengdu.aliyuncs.com/blog/qr.jpg'  //引入二维码图片链接
          qr.onload = () => {
            //在图片加载后将其绘制在画布上
            ctx.drawImage(qr, canvas.width / 1.7, canvas.height / 1.35, canvas.width / 3, canvas.width / 3);
            wx.canvasToTempFilePath({ //将画布上的内容生成图片
              x: 0, // 起点x坐标
              y: 0, // 起点y坐标
              width: 576,  //终点x坐标（画布的宽度）
              height: 854,  //终点y坐标（画布的高度）
              destWidth: 576 * 2, // 生成图片的宽度（建议为2倍）
              destHeight: 854 * 2,  //生成图片的高度（建议为2倍）
              canvas: canvas,  
              // canvas为DOM节点 （如果标签存在type=2d，id='myCanvas'则为canvas：canvas，如果标签为canvas-id="myCanvas"，则应写为canvas-id："#myCanvas"）；此处将影响图片能否生成；
              success(res) {
                console.log(res.tempFilePath) //生成图片的本地临时路径
                wx.hideLoading() //去除loading提示
              },
              fail(err) {
                console.log(err)
              },
            })
          }
        }
  })
},

以上便是微信小程序canvas绘制海报的整个流程；