Vue前端实现 简单图形验证码

  效果如下图所示

       

 本文主要是讲述验证码的实现，主要是canvas，Math的方法等等。

验证行 html代码如下

<input class="yanzhen" placeholder='验证码' v-model='code'></-input>
<canvas id="canvas" width="96px" height="44px" @click="handleCanvas"></canvas>

样式根据个人需求写就行 不贴css了

vue 中data值如下

data(){
    return {
        code:'',
        true_code:'',
        yanzheng_arr:[]
    }
}

js代码如下

draw(show_num) {
     var canvas_width =  document.querySelector("#canvas").clientWidth;
     var canvas_height = document.querySelector("#canvas").clientHeight;
     var canvas = document.getElementById("canvas"); //获取到canvas
     var context = canvas.getContext("2d"); //获取到canvas画图
     canvas.width = canvas_width;
     canvas.height = canvas_height;
     var sCode = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
     var aCode = sCode.split(",");
     var aLength = aCode.length; //获取到数组的长度

     //4个验证码数
     for (var i = 0; i <= 3; i++) {
         var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
         var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
         var txt = aCode[j]; //得到随机的一个内容
         show_num[i] = txt.toLowerCase();// 依次把取得的内容放到数组里面
         var x = 10 + i * 20; //文字在canvas上的x坐标
         var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
         context.font = "bold 23px 微软雅黑";

         context.translate(x, y);
         context.rotate(deg);

         context.fillStyle = this.randomColor();
         context.fillText(txt, 0, 0);

         context.rotate(-deg);
         context.translate(-x, -y);
     }
     //验证码上显示6条线条
     for (var i = 0; i <= 5; i++) {
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
            Math.random() * canvas_width,
            Math.random() * canvas_height
        );
        context.lineTo(
          	Math.random() * canvas_width,
          	Math.random() * canvas_height
        );
        context.stroke();
      }
      //验证码上显示31个小点
      for (var i = 0; i <= 30; i++) {
          context.strokeStyle = this.randomColor();
          context.beginPath();
          var x = Math.random() * canvas_width;
          var y = Math.random() * canvas_height;
          context.moveTo(x, y);
          context.lineTo(x + 1, y + 1);
          context.stroke();
      }

      //最后把取得的验证码数组存起来，方式不唯一
      var num = show_num.join("");
      // console.log(num);
      this.true_code = num
},
//得到随机的颜色值
randomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
},
//canvas点击刷新
handleCanvas(){
    this.draw(this.yanzheng_arr);
}

最后 如果有判断条件的话 判断code 和 true_code 是否一致就可以