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="width: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");

    width: 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 {

    /*width: 100%;*/

    /*height: 100%;*/

    pointer-events: none;

  }

  .modal {

    position: absolute;

    width: 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;

    width: 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]]}

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