小程序画布canvas（带圆角的画布和带圆角的图片）

const drawShareImg = function (that) {
  let bg = 'https://dahoutai.side.vip/project/app/img/mall-shareimg-bg.jpg'
  let titleBg = 'https://dahoutai.side.vip/project/app/img/mall-shareimg-title.png'
  let shareGoods = [
    'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
    'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
    'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
    'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
    'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
    'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
    'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
    'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
    'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
  ]
  wx.showToast({
    title: '生成海报中...',
    mask: true,
    icon: 'loading'
  })
  let num = 0
  wx.getImageInfo({
    src: bg,
    success: function (res) {
      let rate = 0.5 // 缩小比例
      let ctx = wx.createCanvasContext('myCanvas')
      ctx.drawImage(res.path,0,0,690*rate,1031*rate) // 背景
      wx.getImageInfo({
        src: titleBg,
        success: function (res) {
          ctx.drawImage(res.path, 0, 0,690*rate,211*rate) // 背景标题
          let shareGoodsLen = shareGoods.length
          for(let i=0;i<shareGoodsLen;i++){
            console.log(shareGoods[i])
            wx.getImageInfo({
              src: shareGoods[i],
              success: function (res) {
                shareGoods[i] = res.path
                ++ num
                if(num == shareGoodsLen){ // 这里有个异步问题
                  console.log('开始画图')
                  // 先画商品分享图的白色背景，背景高度需要根据3的倍数计算函数
                  // 定位每个商品图片x和y轴
                  let line = Math.ceil(shareGoodsLen/3) // 行数
                  let xy = [
                    { x: (30+30)*rate,y: (246+30)*rate },
                    { x: (30+225)*rate,y: (246+30)*rate },
                    { x: (30+420)*rate,y: (246+30)*rate },
                    { x: (30+30)*rate,y: (246+226)*rate },
                    { x: (30+225)*rate,y: (246+226)*rate },
                    { x: (30+420)*rate,y: (246+226)*rate },
                    { x: (30+30)*rate,y: (246+421)*rate },
                    { x: (30+225)*rate,y: (246+421)*rate },
                    { x: (30+420)*rate,y: (246+421)*rate }
                  ]

                  // 白色背景
                  ctx.beginPath();
                  ctx.save();
                  ctx.setLineWidth(1)
                  ctx.setStrokeStyle('#fff')
                  ctx.moveTo(40*rate,246*rate);           // 创建开始点
                  ctx.lineTo(650*rate,246*rate);          // 创建水平线
                  ctx.arcTo(660*rate,246*rate,660*rate,256*rate,20*rate); // 创建弧
                  ctx.lineTo(660*rate,868*rate);         // 创建垂直线
                  ctx.arcTo(660*rate,878*rate,650*rate,878*rate,20*rate); // 创建弧
                  ctx.lineTo(40*rate,878*rate);         // 创建水平线
                  ctx.arcTo(30*rate,878*rate,30*rate,868*rate,20*rate); // 创建弧
                  ctx.lineTo(30*rate,256*rate);         // 创建垂直线
                  ctx.arcTo(30*rate,246*rate,40*rate,246*rate,20*rate); // 创建弧
                  ctx.closePath()
                  ctx.clip();
                  ctx.fillStyle="#fff";
                  ctx.fillRect(0,0,500,500);
                  ctx.stroke();
                  ctx.restore();

                  shareGoods.forEach((e,idx)=>{
                    ctx.beginPath();
                    ctx.save();
                    let width = 160*rate
                    let radius = 8*rate
                    let angleLine = 10*rate
                    // { x: (30+30)*rate,y: (246+30)*rate },
                    ctx.setLineWidth(1)
                    ctx.setStrokeStyle('#E9E9E9')
                    ctx.moveTo(xy[idx].x+angleLine,xy[idx].y);           // 创建开始点
                    ctx.lineTo(xy[idx].x+angleLine+width,xy[idx].y);          // 创建水平线
                    ctx.arcTo(xy[idx].x+angleLine*2+width,xy[idx].y,xy[idx].x+angleLine*2+width,xy[idx].y+angleLine,radius); // 创建弧
                    ctx.lineTo(xy[idx].x+angleLine+width+angleLine,xy[idx].y+angleLine+width);         // 创建垂直线
                    ctx.arcTo(xy[idx].x+angleLine*2+width,xy[idx].y+angleLine*2+width,xy[idx].x+angleLine+width,xy[idx].y+angleLine*2+width,radius); // 创建弧
                    ctx.lineTo(xy[idx].x+angleLine,xy[idx].y+angleLine*2+width);         // 创建水平线
                    ctx.arcTo(xy[idx].x,xy[idx].y+angleLine*2+width,xy[idx].x,xy[idx].y+angleLine+width,radius); // 创建弧
                    ctx.lineTo(xy[idx].x,xy[idx].y+angleLine);         // 创建垂直线
                    ctx.arcTo(xy[idx].x,xy[idx].y,xy[idx].x+angleLine,xy[idx].y,radius); // 创建弧
                    ctx.stroke(); // 这个具体干什么用的？
                    ctx.clip();
                    ctx.drawImage(e, xy[idx].x, xy[idx].y,180*rate,180*rate);
                    ctx.restore();
                  })

                  ctx.draw()

                  setTimeout(()=>{
                    let rate = 2
                    wx.canvasToTempFilePath({
                      x: 0,
                      y: 0,
                      width: 345,
                      height: 515,
                      destWidth: 345*rate,
                      destHeight: 515*rate,
                      canvasId: 'myCanvas',
                      success: function (res) {
                        that.setData({
                          shareImg: res.tempFilePath
                        })
                        wx.hideLoading()
                        console.log('绘图成功')
                      },
                      fail: function () {
                        // 导出图片错误
                        /*wx.showModal({
                          title: '导出图片时出错',
                          content: '请重新尝试！',
                        })*/
                      },
                      complete: function () {
                        wx.hideLoading()
                      }
                    },that)
                  },1000)
                }
              },
              fail(e){
                console.log('失败')
                console.log(e)
              }
            })
          }


        }
      })
    }
  })

}
export default drawShareImg

image.png

转载于:https://www.jianshu.com/p/3277e5fa0209