小程序画布绘制海报

效果图

这里需要注意的是：要根据每个屏幕的宽来动态的赋值图片的宽度和文字的居中

绘制图片代码

// 初始化画布
  initCanvas() {
    const ctx = wx.createCanvasContext('canvas')
    const {orderDetail: {vehicleInfo, ownerInfo, checkInfo, imgs}, imagePath} = this.data
    const headerImgUrl = `${imagePath}/bike/verificaDetails-header-bg.png`
    const {screenWidth} = wx.getSystemInfoSync()

    wx.getImageInfo({
      src: imgs.carAngleImg,
      success: img => {
        console.log(img)
        // 绘制基本文字信息
        ctx.setFontSize(15)
        wx.getImageInfo({
          src: headerImgUrl,
          success: i => {
            // 绘制背景
            ctx.save()
            ctx.setFillStyle('white')
            ctx.fillRect(0, 0, screenWidth, 1200)
            ctx.restore()
            // 绘制头部背景图片和文字
            ctx.save()
            ctx.drawImage(img.path, 60, 390, 260, 140)
            ctx.drawImage(i.path, 0, 0, screenWidth, 130)
            ctx.restore()
            ctx.save()
            ctx.setFillStyle('white')
            ctx.fillText(`xxxxxxx行车行驶证`, 20, 30)
            ctx.save()
            ctx.setFontSize(20)
            ctx.setTextAlign('center')
            ctx.fillText(`${vehicleInfo.ebikeNumber}`, screenWidth/2 , 80)
            ctx.restore()
            ctx.setTextAlign('center')
            ctx.fillText(`过渡期临时车牌`, screenWidth/2, 110)
            ctx.restore()
            // 绘制文字信息
            ctx.fillText(`车主姓名：${ownerInfo.name}`, 20, 160)
            ctx.fillText(`车辆品牌：${vehicleInfo.vehicleBrand}`, 20, 190)
            ctx.fillText(`证件号码：${ownerInfo.identityNo}`, 20, 220)
            ctx.fillText(`住址：${ownerInfo.addressCity}-${ownerInfo.addressDetail}`, 20, 250)
            ctx.fillText(`车辆型号：${vehicleInfo.vehicleModel}`, 20, 280)
            ctx.fillText(`整车编码：${vehicleInfo.vehiclePlate}`, 20, 310)
            ctx.fillText(`电机号：${vehicleInfo.motorNumber}`, 20, 340)
            ctx.fillText(`上牌时间：${checkInfo.checkTime}`, 20, 370)
            ctx.draw()
          }
        })
      }
    })
  },

保存canvas代码

	wx.showModal({
      title: '温馨提示!',
      content: '确定要下载此电子行驶证吗?',
      success: v => {
        if (v.confirm) {
          wx.canvasToTempFilePath({
            canvasId: 'canvas',
            success: res => {
              console.log(res)
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  wx.showToast({
                    title: '保存成功',
                  })
                },
                fail: () => this.setData({isShowModal: false})
              })
            }
          })
        }
      }
    })