微信页面嵌入canvas画图安卓会下拉的bug

需要用canvas实现手写签名的功能

然鹅 微信打开页面安卓手机很不友好，我们需要固定的画布，在微信里面打开的链接页面如果没有经过特殊处理，往下画canvas的时候，页面下滑出现源站的域名，画图就会被打断。
像酱紫。

这边解决的思路是临时让页面禁用touchmove

vue框架 部分源码

<template>
  <div class="signPage">
    <div class="contentWrapper">
      <div class="title">请在下方空白处签名</div>
      <div id="canvas"></div>
    </div>
    <div class="wrapper">
      <button id="clearCanvas">清除</button>
      <button id="saveCanvas">完成</button>
    </div>
  </div>
</template>

import LineCanvas from '../static/signImg'
function aa (e) {
  e.preventDefault()
}
export default {
  name: 'signPage',
  data () {
    return {
    }
  }
  mounted () {
    this.$nextTick(() => {
      new LineCanvas({
        el: document.getElementById('canvas'), // 绘制canvas的父级div
        clearEl: document.getElementById('clearCanvas'), // 清除按钮
        saveEl: document.getElementById('saveCanvas'), // 保存按钮
        save: this.commit
      })
    })
    document.querySelector('.signPage').addEventListener('touchmove', aa, { passive: false })
  },
  beforeDestroy () {
    document.querySelector('.signPage').removeEventListener('touchmove', aa, { passive: false })
  },
  methods: {
    commit (imgSrc) {
      sessionStorage.setItem('sign', imgSrc)
    }

<style lang='less' scoped>
@w: 100rem;
.signPage {
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  position: fixed;
  top: 0;
  left: 0;
  padding: 39/@w 30/@w 0 30/@w;
  z-index: 2;
  .contentWrapper {
    background: #fff;
    width: 690/@w;
    height: 1039/@w;
    border-radius: 12/@w;
    padding: 0 24/@w;
    box-sizing: border-box;
    .title {
      line-height: 42/@w;
      font-size: 32/@w;
      color: #333;
      border-bottom: 1px solid #e5e5e5;
      padding: 24/@w 0;
      span {
        color: #c8132d;
      }
    }
  }
}
#canvas {
  width: 100%;
  height: 949/@w;
}
#canvas canvas {
  display: block;
}
.wrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1/@w solid #e5e5e5;
  #clearCanvas,#saveCanvas {
    margin: 0;
    padding: 0;
    outline: none;
    background: #c8132d;
    font-size: 34/@w;
    letter-spacing: 1.42/@w;
    color: #fff;
    width: 50%;
    line-height: 90/@w;
    border: 0;
    float: left;
  }
  #clearCanvas {
    background: #fff;
    color:#666;
  }
}
</style>

引用js文件代码 signImg.js

//  new lineCanvas({
//      el: document.getElementById('canvas'),// 绘制canvas的父级div
//      clearEl: document.getElementById('clearCanvas'),// 清除按钮
//      saveEl: document.getElementById('saveCanvas'),// 保存按钮
//      //       linewidth:1,// 线条粗细，选填
//      //       color:'black',// 线条颜色，选填
//      //       background:'#ffffff'// 线条背景，选填
//  })

function lineCanvas (obj) {
  this.linewidth = 2
  this.color = '#000000'
  this.background = 'rgba(255,255,255,0)'
  for (var i in obj) {
    this[i] = obj[i]
  }
  this.canvas = document.createElement('canvas')
  this.el.appendChild(this.canvas)
  this.cxt = this.canvas.getContext('2d')
  this.canvas.width = this.el.clientWidth
  this.canvas.height = this.el.clientHeight
  this.cxt.fillStyle = this.background
  this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.height)
  this.cxt.strokeStyle = this.color
  this.cxt.lineWidth = this.linewidth
  this.cxt.lineCap = 'round'
  this.offsetTop = this.el.offsetTop
  this.offsetLeft = this.el.offsetLeft
  this.isSign = false
  // 开始绘制
  this.canvas.addEventListener('touchstart', function (e) {
    this.cxt.beginPath()
    this.cxt.moveTo(e.changedTouches[0].pageX - this.offsetLeft, e.changedTouches[0].clientY - this.offsetTop)
  }.bind(this), false)
  // 绘制中
  this.canvas.addEventListener('touchmove', function (e) {
    this.cxt.lineTo(e.changedTouches[0].pageX - this.offsetLeft, e.changedTouches[0].clientY - this.offsetTop)
    this.cxt.stroke()
    this.isSign = true
  }.bind(this), false)
  // 结束绘制
  this.canvas.addEventListener('touchend', function () {
    this.cxt.closePath()
  }.bind(this), false)
  // 清除画布
  this.clearEl.addEventListener('click', function () {
    this.isSign = false
    this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height)
  }.bind(this), false)
  // 保存图片，直接转base64
  this.saveEl.addEventListener('click', function () {
    if (this.isSign) {
      var imgBase64 = this.canvas.toDataURL('image/png', 1)
      obj.save && obj.save(imgBase64)
    } else {
      alert('请完成签名再保存')
    }
    // console.log(imgBase64)
  }.bind(this), false)
}

// 进入全屏
export function requestFullScreen () {
  var de = document.documentElement
  if (de.requestFullscreen) {
    de.requestFullscreen()
  } else if (de.mozRequestFullScreen) {
    de.mozRequestFullScreen()
  } else if (de.webkitRequestFullScreen) {
    de.webkitRequestFullScreen()
  }
}
// 退出全屏
export function exitFullscreen () {
  var de = document
  if (de.exitFullscreen) {
    de.exitFullscreen()
  } else if (de.mozCancelFullScreen) {
    de.mozCancelFullScreen()
  } else if (de.webkitCancelFullScreen) {
    de.webkitCancelFullScreen()
  }
}

export default lineCanvas
// export requestFullScreen
// export exitFullscreen

目前canvas需要顶格top0 left0（加padding可以，加margin不行），否则可能画笔错位。

同时会造成顶部无法点击 需要返回按钮之类可以设置z-index