js动态验证码

getImgYanzheng(){

var cas_width = 150;

var cas_height = 50;

let canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

canvas.width = cas_width;

canvas.height = cas_height;

var show_num =[];

var sCode = 'A,B,C,E,F,G,H,J,K,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;

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

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

/*产生0-50的随机弧度*/

var deg = (Math.random() * 50 * Math.PI) / 180;

var txt = aCode[j]; //随机值

show_num[i] = txt.toLowerCase();

let x = 10 + i * 40; //文字在canvas上的x坐标

let 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(let i = 0; i <= 9; 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(let i = 0; i <=50; i++){

context.strokeStyle = this.randomColor();

context.beginPath();

let x = Math.random() * canvas.width;

let y = Math.random() * canvas.height;

context.moveTo(x,y);

context.lineTo(x + 1, y + 1);

context.stroke();

}

this.show_num = show_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 + ')';

},