小程序上下滑动的时候,canvas 也会跟着滑动

html

<view class="showCanvas" wx:if="{{isShowCanvasModal}}" catchtouchmove='true'>
  <view class="showCanvas-content">
    <icon class="canvas-close" type="cancel" bindtap="hideCanvasModal" color="#fff" size="30" />
     <canvas  disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"  class="canvas" style='width:310px;height:375px;' canvas-id="myCanvas"></canvas>
     <button class="save" bindtap="save">保存本地</button>
     <image src="{{posterInfo.imgUrl}}" id="banner" class="hidden"/>
     <image src="{{posterInfo.bottomImgUrl}}" id="logo" class="hidden"/>
  </view>
</view>

尝试了disable-scroll=“true” bindtouchstart=“touchStart” bindtouchmove=“touchMove” bindtouchend=“touchEnd”，但不管用。
所以在遮罩上添加catchtouchmove='true’就ok了。

附加一个canvas
js文件：

 createCanvas: function() {
    // 使用wx.createCanvasContext获取绘图上下文 context
    let ctx = wx.createCanvasContext('myCanvas', this)
    ctx.fillStyle="#fff";
    console.log(1111)
    ctx.setFillStyle('white')
    ctx.fillRect(0,0,620,750);
    ctx.draw(true);

    // 头部banner
    wx.getImageInfo({
      src: this.data.posterInfo.imgUrl,
      success(res) {
        ctx.drawImage(res.path, 0, 0, 310, 128)
        ctx.draw(true)
      }
    })
    // 底部logo
    wx.getImageInfo({
      src: this.data.posterInfo.bottomImgUrl,
      success(res) {
        console.log('下载陈工')
        ctx.drawImage(res.path, 18, 341, 76, 13)
        ctx.draw(true)
      }
    })
    // 二维码
    wx.getImageInfo({
      src: this.data.posterInfo.codeImgUrl,
      success(res) {
        ctx.drawImage(res.path, 197, 260, 95, 95)
        ctx.draw(true)
      }
    })
    // 用户头像
    wx.getImageInfo({
      src: this.data.userInfo.avatarUrl,
      success(res) {
        ctx.save();
        ctx.beginPath();
        ctx.arc(32, 213, 13, 0,Math.PI * 2, false)
        ctx.clip();
        ctx.drawImage(res.path, 19, 200, 26, 26)
        ctx.restore();
        ctx.draw(true)
      }
    })
    ctx.setFontSize(17)
    ctx.fillStyle = '#333'
    ctx.fillText(this.data.posterInfo.activityName, 18, 164)
    ctx.stroke() //进行绘制

    ctx.beginPath()
    ctx.moveTo(18, 190) //设置起点状态
    ctx.lineTo(48, 190) //设置末端状态
    ctx.lineWidth = 1 //设置线宽状态
    ctx.strokeStyle = '#E6E6E6' //设置线的颜色状态
    ctx.stroke() //进行绘制

    ctx.setFontSize(15)
    ctx.fillStyle = '#333'
    let nickName = this.data.userInfo && this.data.userInfo.nickName
    if (nickName) {
      ctx.fillText(nickName, 60, 218)
    }

    ctx.stroke()
    ctx.setFontSize(10)
    ctx.fillStyle = '#999999'
    ctx.fillText(this.data.posterInfo.inviteTips, 18, 244)
    ctx.stroke()
    ctx.setFontSize(12)
    ctx.fillStyle = '#333'
    ctx.fillText(this.data.posterInfo.qrCodeTips, 18, 303)
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(0, 344)
    ctx.lineTo(310, 344)
    ctx.lineWidth = 48
    ctx.strokeStyle = '#F5F5F5'
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(0, 372)
    ctx.lineTo(310, 372)
    ctx.lineWidth = 6
    ctx.strokeStyle = '#007BFF'
    ctx.stroke()
  },

const options = {
  data: {
    posterInfo: {
      imgUrl: '',
      activityName: '',
      inviteTips: '',
      qrCodeTips: '',
      bottomImgUrl: 'http://',
      codeImgUrl: 'http://'
    }
  }

 // 保存canvas 
  save() {
    const that = this
    wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        quality: 1,
        success: res => {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success() {
              console.log(res.tempFilePath)
              wx.showToast({
                title: '保存成功',
                icon: 'none',
                duration: 2000
              })
              that.setData({
                // isShowCanvasModal: false,
                isDisabled: true
              })
            },
            fail(err) {
              console.log(err)
            }
          })
        }
      },
      this
    )
  },