vue仿京东画线验证码，前端手指位置数据获取

需求是这样的，京东H5移动端登录，有个安照箭头方向，画线登录的验证，看看是怎么实现的：

直接上代码了：

<template>
  <div v-if="visible">
    <div class="modal">
      <p style="font-size:0.15rem;color: #333333;line-height: 0.22rem;padding:0.08rem 0">{{title}}</p>
      <div class="captchaArea">
        <img @touchstart="touchStartCaptcha($event)" @touchmove="touchMoveCaptcha($event)"
             @touchend="touchEndCaptcha($event)" :src="imgUrl" alt="" @error="onError($event)"
             style="100%;height:100%;">
      </div>
      <div class="tips">请按照箭头路线滑动手指</div>
    </div>
    <div class="shade">
    </div>
    <div id="canvas-wrapper" v-show="showCanvas">
      <canvas id="captcha_canvas">您的浏览器不支持！请换用高版本浏览器！</canvas>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        showCanvas: false,
        imgUrl: "",
        da: [],
        pa: [],
        initTime: '',
        defaultPic: ''
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: "安全验证"
      }
    },
    methods: {
      onError (e) {
        this.showCanvas = false
        e.target.src = this.defaultPic;
      },
      show () {
        this.visible = true;
      },
      hide () {
        this.visible = false;
      },
      loadImg (imgUrl) {
        if (imgUrl) {
          this.imgUrl = imgUrl
        }
      },
      drawCanvas (e) { // 绘制手指划过的路线
        let c = e.touches[0].clientX
        let t = e.touches[0].clientY
        let sx = e.touches[0].screenX
        let sy = e.touches[0].screenY
        this.pa.push({
          x: c,
          y: t
        })
        this.da.push([sx, sy, c, t, (new Date).getTime() - this.initTime]) // 持续添加坐标
        let oa = document.getElementById("captcha_canvas").getContext("2d")
        oa.clearRect(0, 0, window.screen.width, window.screen.height)
        oa.strokeStyle = "#ff9046"
        oa.lineWidth = 6
        oa.beginPath()
        oa.moveTo(this.pa[0].x, this.pa[0].y)
        for (let i = 1; i < this.pa.length - 2; i++) {
          let drawX = (this.pa[i].x + this.pa[i + 1].x) / 2
          let drawY = (this.pa[i].y + this.pa[i + 1].y) / 2
          oa.quadraticCurveTo(this.pa[i].x, this.pa[i].y, drawX, drawY) // 多次绘制
        }
        oa.stroke()
        this.initTime = new Date().getTime()
      },
      touchStartCaptcha (e) {
        this.initTime = new Date().getTime()
        this.showCanvas = true
        let canvas = document.getElementById("captcha_canvas")
        canvas.width = window.screen.width
        canvas.height = window.screen.height
        this.drawCanvas(e) // 开始绘制手指划过路线
      },
      touchMoveCaptcha (e) {
        if (this.da.length > 400) {
          this.da = []
          this.pa = []
          this.showCanvas = false
          return false
        }
        this.drawCanvas(e) // 持续绘制手指划过路线
      },
      touchEndCaptcha () {
        let c = { 'x':10, 'y':55, 'ht':179.313, 'wt':290.078, 'list': this.da }
        this.da = []
        this.pa = []
        this.showCanvas = false
        let str = JSON.stringify(c)
        this.$emit('touchEndCaptcha', str)
      }
    }
  }
</script>
<style scoped>
  i {
    background-image: url("../assets/img/cancel.png");
     45px;
    height: 45px;
    display: inline-block;
    position: absolute;
    transform: scale(0.3, 0.3);
    right: 0px;
    top: 0px;
  }

  .shade {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
    z-index: 1;
  }

  #canvas-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 3;
  }

  #captcha_canvas {
    /* 100%;*/
    /*height: 100%;*/
    pointer-events: none;
  }

  .modal {
    position: absolute;
     90%;
    height: 3rem;
    background-color: #ffffff;
    opacity: 1;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 5px;
    padding: 0.08rem 0.2rem;
    text-align: center;
    box-sizing: border-box;
  }
  .captchaArea {
    height: 1.8rem;
    margin-bottom: 0.3rem;
    background-color: #D8D8D8;
  }

  .tips {
    font-size: 0.16rem;
  }

  .bottom {
    height: 0.4rem;
    margin-top: 0.1rem;
    line-height: 0.4rem;
    text-align: left;
  }

  .bottom span {
    display: inline-block;
    vertical-align: top;
  }

  .bottom img {
    display: inline-block;
     50%;
  }
</style>

最终的输出：（无需关注）

{'x':10,'y':55,'ht':179.313,'wt':290.078,'list':[[1058,440,90.66666412353516,276,1],[1058,440,90.66666412353516,276,0],[1066,444,101.33333587646484,281.3333435058594,150],[1068,444,104,281.3333435058594,9],[1071,446,108,284,7],[1074,447,112,285.3333435058594,8],[1075,447,113.33333587646484,285.3333435058594,8],[1077,449,116,288,8],[1078,450,117.33333587646484,289.3333435058594,8],[1079,450,118.66666412353516,289.3333435058594,8],[1080,450,120,289.3333435058594,10],[1081,450,121.33333587646484,289.3333435058594,17],[1082,450,122.66666412353516,289.3333435058594,5],[1083,451,124,290.6666564941406,11],[1084,451,125.33333587646484,290.6666564941406,5],[1085,451,126.66666412353516,290.6666564941406,11],[1086,452,128,292,5],[1088,453,130.6666717529297,293.3333435058594,11],[1089,453,132,293.3333435058594,5],[1090,453,133.3333282470703,293.3333435058594,17],[1091,454,134.6666717529297,294.6666564941406,8],[1092,454,136,294.6666564941406,7],[1094,454,138.6666717529297,294.6666564941406,9],[1095,454,140,294.6666564941406,8],[1096,454,141.3333282470703,294.6666564941406,8],[1098,454,144,294.6666564941406,7],[1099,454,145.3333282470703,294.6666564941406,8],[1100,454,146.6666717529297,294.6666564941406,8],[1101,455,148,296,8],[1102,455,149.3333282470703,296,8],[1103,455,150.6666717529297,296,129],[1104,456,152,297.3333435058594,15],[1105,456,153.3333282470703,297.3333435058594,8],[1107,457,156,298.6666564941406,9],[1108,457,157.3333282470703,298.6666564941406,16],[1109,457,158.6666717529297,298.6666564941406,7],[1111,457,161.3333282470703,298.6666564941406,9],[1113,457,164,298.6666564941406,8],[1115,458,166.6666717529297,300,7],[1117,458,169.3333282470703,300,9],[1119,458,172,300,7],[1122,458,176,300,9],[1125,458,180,300,7],[1127,458,182.6666717529297,300,11],[1130,458,186.6666717529297,300,5],[1132,457,189.3333282470703,298.6666564941406,10],[1134,457,192,298.6666564941406,6],[1137,457,196,298.6666564941406,11],[1141,456,201.3333282470703,297.3333435058594,16],[1142,456,202.6666717529297,297.3333435058594,5],[1143,456,204,297.3333435058594,16],[1144,456,205.3333282470703,297.3333435058594,9],[1145,456,206.6666717529297,297.3333435058594,23],[1146,456,208,297.3333435058594,25],[1148,456,210.6666717529297,297.3333435058594,7],[1149,455,212,296,8],[1150,455,213.3333282470703,296,16],[1151,455,214.6666717529297,296,11],[1152,455,216,296,5],[1153,455,217.3333282470703,296,13],[1155,455,220,296,3],[1156,455,221.3333282470703,296,12],[1162,455,229.3333282470703,296,14],[1164,455,232,296,7],[1166,455,234.6666717529297,296,10],[1168,455,237.3333282470703,296,5],[1170,455,240,296,8],[1171,455,241.3333282470703,296,9],[1172,455,242.6666717529297,296,8],[1173,455,244,296,7],[1175,455,246.6666717529297,296,152],[1176,455,248,296,32],[1177,456,249.3333282470703,297.3333435058594,8],[1178,457,250.6666717529297,298.6666564941406,8],[1179,457,252,298.6666564941406,24],[1181,458,254.6666717529297,300,72],[1181,459,254.6666717529297,301.3333435058594,8],[1183,459,257.3333435058594,301.3333435058594,8],[1183,460,257.3333435058594,302.6666564941406,8],[1184,460,258.6666564941406,302.6666564941406,11],[1185,461,260,304,21],[1185,462,260,305.3333435058594,17],[1186,464,261.3333435058594,308,23],[1187,466,262.6666564941406,310.6666564941406,32],[1187,467,262.6666564941406,312,8],[1188,469,264,314.6666564941406,25],[1188,470,264,316,23],[1188,471,264,317.3333435058594,8],[1188,473,264,320,8],[1188,474,264,321.3333435058594,18],[1188,475,264,322.6666564941406,6],[1188,476,264,324,10],[1188,477,264,325.3333435058594,16],[1188,478,264,326.6666564941406,6],[1188,479,264,328,9],[1188,480,264,329.3333435058594,15],[1188,481,264,330.6666564941406,9],[1188,482,264,332,10],[1188,483,264,333.3333435058594,14],[1188,484,264,334.6666564941406,7],[1188,485,264,336,8],[1189,488,265.3333435058594,340,17],[1189,489,265.3333435058594,341.3333435058594,15],[1190,492,266.6666564941406,345.3333435058594,16],[1190,494,266.6666564941406,348,32],[1191,496,268,350.6666564941406,8],[1192,498,269.3333435058594,353.3333435058594,17],[1192,499,269.3333435058594,354.6666564941406,16],[1193,501,270.6666564941406,357.3333435058594,7],[1193,502,270.6666564941406,358.6666564941406,16],[1194,503,272,360,9],[1194,504,272,361.3333435058594,16],[1194,505,272,362.6666564941406,23],[1195,506,273.3333435058594,364,9],[1196,507,274.6666564941406,365.3333435058594,7],[1197,509,276,368,25],[1198,511,277.3333435058594,370.6666564941406,23],[1198,512,277.3333435058594,372,24],[1198,513,277.3333435058594,373.3333435058594,16],[1199,515,278.6666564941406,376,8],[1199,516,278.6666564941406,377.3333435058594,33],[1199,517,278.6666564941406,378.6666564941406,15],[1200,518,280,380,32],[1200,519,280,381.3333435058594,8],[1200,520,280,382.6666564941406,72],[1200,521,280,384,16],[1200,523,280,386.6666564941406,40],[1200,524,280,388,8],[1200,525,280,389.3333435058594,40],[1200,526,280,390.6666564941406,8],[1200,527,280,392,8],[1199,527,278.6666564941406,392,49],[1198,528,277.3333435058594,393.3333435058594,7],[1197,529,276,394.6666564941406,24],[1196,530,274.6666564941406,396,32],[1195,530,273.3333435058594,396,8],[1194,531,272,397.3333435058594,8],[1192,531,269.3333435058594,397.3333435058594,41],[1191,531,268,397.3333435058594,23],[1189,531,265.3333435058594,397.3333435058594,16],[1188,531,264,397.3333435058594,8],[1184,531,258.6666564941406,397.3333435058594,8],[1182,531,256,397.3333435058594,9],[1179,531,252,397.3333435058594,7],[1176,531,248,397.3333435058594,8],[1172,530,242.6666717529297,396,16],[1170,530,240,396,8],[1167,528,236,393.3333435058594,8],[1164,528,232,393.3333435058594,8],[1162,528,229.3333282470703,393.3333435058594,8],[1160,527,226.6666717529297,392,8],[1158,526,224,390.6666564941406,8],[1156,525,221.3333282470703,389.3333435058594,8],[1154,525,218.6666717529297,389.3333435058594,8],[1153,525,217.3333282470703,389.3333435058594,9],[1151,524,214.6666717529297,388,7],[1150,523,213.3333282470703,386.6666564941406,16],[1149,523,212,386.6666564941406,9],[1149,522,212,385.3333435058594,8],[1148,522,210.6666717529297,385.3333435058594,15],[1146,522,208,385.3333435058594,8],[1145,522,206.6666717529297,385.3333435058594,9],[1144,521,205.3333282470703,384,7],[1142,521,202.6666717529297,384,9],[1140,520,200,382.6666564941406,8],[1138,519,197.3333282470703,381.3333435058594,8],[1136,519,194.6666717529297,381.3333435058594,7],[1134,519,192,381.3333435058594,8],[1133,519,190.6666717529297,381.3333435058594,16],[1130,518,186.6666717529297,380,8],[1129,518,185.3333282470703,380,8],[1127,517,182.6666717529297,378.6666564941406,8],[1125,517,180,378.6666564941406,8],[1124,516,178.6666717529297,377.3333435058594,8],[1123,516,177.3333282470703,377.3333435058594,8],[1121,515,174.6666717529297,376,24],[1120,515,173.3333282470703,376,25],[1118,515,170.6666717529297,376,15],[1117,515,169.3333282470703,376,16],[1115,515,166.6666717529297,376,16],[1111,514,161.3333282470703,374.6666564941406,8],[1110,514,160,374.6666564941406,9],[1109,514,158.6666717529297,374.6666564941406,17],[1108,514,157.3333282470703,374.6666564941406,6],[1107,514,156,374.6666564941406,16],[1106,514,154.6666717529297,374.6666564941406,8],[1104,514,152,374.6666564941406,9],[1103,514,150.6666717529297,374.6666564941406,23],[1102,514,149.3333282470703,374.6666564941406,8],[1101,514,148,374.6666564941406,8],[1100,514,146.6666717529297,374.6666564941406,25],[1098,513,144,373.3333435058594,7],[1097,512,142.6666717529297,372,10],[1096,512,141.3333282470703,372,118],[1094,512,138.6666717529297,372,8],[1092,511,136,370.6666564941406,24],[1091,511,134.6666717529297,370.6666564941406,16],[1090,511,133.3333282470703,370.6666564941406,8],[1088,510,130.6666717529297,369.3333435058594,8],[1087,510,129.3333282470703,369.3333435058594,66],[1085,510,126.66666412353516,369.3333435058594,222]]}

这样就能获取到整个手指划过的路线数据了。