利用canvas绘图，前端实现登录验证码，如下：

1，页面：

<canvas id="canvas" @click="showNum" width="138" height="36"></canvas>

2，数据：

对比yzm和number是否相同

3，页面载入成功后：

mounted(){

    this.draw(this.num);

    this.number =this.num.join().replace(/,/g,'');

}

4，方法中：

/*点击更换-验证码*/

showNum(){

    this.draw(this.num);

    this.number =this.num.join().replace(/,/g,'');

},

draw(num) {

    var canvas_width=138;

    var canvas_height=36;

    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,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";

    var aCode =sCode.split(",");

    var aLength =aCode.length;//获取到数组的长度

    for (var i =0;i <=3;i++) {

        var j =Math.floor(Math.random() *aLength);//获取到随机的索引值

        var deg =Math.random() *15 *Math.PI /180;//产生0~30之间的随机弧度

        var txt =aCode[j];//得到随机的一个内容

        //num[i] = txt.toLowerCase(); toUpperCase()

        num[i] =txt;

        var x =20 +i *30;//文字在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);

    }

    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();

    }

    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();

    }

},

//得到随机的颜色值

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 +")";

}