<canvas id="canvas" width="100" height="38" @click="canvasClick"></canvas>
data(){
show_num:[],
}
this.draw(this.show_num);
draw(show_num) {
const canvas_width = document.getElementById("canvas").clientWidth;
const canvas_height = document.getElementById("canvas").clientHeight;
const canvas = document.getElementById("canvas"); // 获取到canvas的对象,演员
const context = canvas.getContext("2d"); // 获取到canvas画图的环境,演员表演的舞台
canvas.width = canvas_width;
canvas.height = canvas_height;
const sCode =
"a,b,c,d,e,f,g,h,i,j,k,m,n,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";
const aCode = sCode.split(",");
const aLength = aCode.length; // 获取到数组的长度
for (let i = 0; i < 4; i++) {
// 这里的for循环可以控制验证码位数(如果想显示6位数,4改成6即可)
const j = Math.floor(Math.random() * aLength); // 获取到随机的索引值
// var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
const deg = Math.random() - 0.5; // 产生一个随机弧度
const txt = aCode[j]; // 得到随机的一个内容
show_num[i] = txt.toLowerCase();
const x = 10 + i * 20; // 文字在canvas上的x坐标
const 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 <= 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 (let i = 0; i <= 30; i++) {
// 验证码上显示小点
context.strokeStyle = this.randomColor();
context.beginPath();
const x = Math.random() * canvas_width;
const y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
},