1.在使用canvas之前 获取设备像素比 

2. 一定要初始化画布

3.canvas绘制第二张图的时候, 在ios端和ios打开H5的时候会出现(安卓不会出现), 图片合成空白或者只有最后一张图, 我的解决方式是: 加定时器

  <!-- canvas -->
    <canvas id="myCanvas"
      :style="{width: canvasStyle.width +'px' , height: canvasStyle.height+'px' , position: 'absolute' ,left:'-1000px',top:'-1000px'}"
      canvas-id="myCanvas" type="2d"></canvas>
 // 签名组件

    <Signature ref="sig" v-model="v" class="_Signature"></Signature>

   //引入签名插件
  import Signature from '@/components/sin-signature/sin-signature.vue'

     
  components: {
      Signature
    },


methods 区域 

获取设备像素比
        uni.getSystemInfo({
          success: (res) => {
            if (res.devicePixelRatio > 1) {
              this.devicePixelRatio = res.devicePixelRatio
            }
          }
        })
    // data定义字段 存储设备宽高  用的rpx 所以除以2
        this.canvasStyle.width = (670 / 2) * this.devicePixelRatio
        this.canvasStyle.height = (998 / 2) * this.devicePixelRatio
        //获取画布
        var ctx = uni.createCanvasContext('myCanvas', this)
        //初始化
        ctx.fillRect(0, 0, this.canvasStyle.width, this.canvasStyle.height)

        //合同放置画布 x轴0，y轴0 宽 高
        ctx.drawImage(this.img, 0, 0, (670 / 2) * this.devicePixelRatio, (998 / 2) * this.devicePixelRatio)

        //签名放置画布 
        setTimeout(() => {
          ctx.drawImage(this.v, (528 / 2) * this.devicePixelRatio, (910 / 2) * this.devicePixelRatio, (104 / 2) *
            this.devicePixelRatio, (50 / 2) * this.devicePixelRatio)
        }, 500)


        setTimeout(() => {
          ctx.draw(true, ((ret) => {
            uni.showLoading({
              title: '加载中'
            })
            uni.canvasToTempFilePath({
              canvasId: 'myCanvas',
              complete: function(res) {},
              success: (res) => {
                console.log('合成成功', res.tempFilePath)
                let _TOKEN = this.$store.state.user.TOKEN
                let temFilePath = res.tempFilePath
                uni.uploadFile({
                  url: eContractFile,
                  filePath: temFilePath,
                  name: 'eContractFile',
                  header: {
                    Authorization: 'Bearer ' + _TOKEN,
                  },
                  success: (res) => {
                    if (res.statusCode >= 200 && res.statusCode < 300) {
                      setTimeout(async () => {
                        await uni.hideLoading()
                      }, 500);
                      uni.$u.toast('上传成功');
                      // 合同签约成功的路径
                      uni.setStorageSync('eContract', res.data)
                      this.eContimg = uni.getStorageSync('eContract')
                      console.log('合同', uni.getStorageSync('eContract'));
                      this.show = true
                      uni.navigateTo({
                        url: '/pages/components/siginpage/siginpage'
                      })