思路:随机生成四位数(随机数包括数字及大小写字母),使用canvas进行绘制,生成的随机数与填写数进行校验。
效果示例:
完整代码:
<template>
<div>
<div class="flex-center">
<input type="text" v-model="value" placeholder="请输入验证码(区分大小写)" style="height:43px;font-size:20px;" id="text">
<canvas id="canvas" width="100" height="43" @click="dj" style="border: 1px solid #ccc"></canvas>
</div>
<div class="flex-center margin-t20">
<button class="btn" @click="dj">看不清,换一个</button>
<button class="btn" @click="sublim">提交</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show_num: [],
value: ''
}
},
mounted() {
this.show_num=[];
this.draw(this.show_num);
},
methods: {
sublim() {
var num = this.show_num.join("");
if(!this.value) return alert('请输入验证码!');
if(this.value == num){
alert('提交成功!');
this.dj()
}else{
alert('验证码错误!\n你输入的是: '+this.value+"\n正确的是: "+num+'\n请重新输入!');
this.dj()
}
},
charList(length, code) {
// fromCharCode: 将Unicode编码转为一个字符:
// charCodeAt: 获得自负unicode编码;
return new Array(length)
.fill(null)
.map((v, i) => String.fromCharCode(code.charCodeAt() + i)); // 获取’a’的charCode: "a".charCodeAt(0)=97
},
// 获得图形验证码集合
getCode() {
// 生成26个小写字母集合
const lowercaseAlphabet = this.charList(26, 'a')||[];
// 生成26个大写字母集合
const uppercaseAlphabet = this.charList(26, 'A')||[];
// 生成0-9数字集合
const numsZeroToNine = new Array(10).fill(null).map((v, i) => i)
return [...lowercaseAlphabet, ...uppercaseAlphabet, ...numsZeroToNine]
},
draw(show_num, codeLength=4) { // codeLength: 设置验证码长度
let canvas = document.getElementById("canvas");//获取到canvas的对象,演员
let context = canvas.getContext("2d");//获取到canvas画图的环境,演员表演的舞台
let canvas_width=canvas.width;
let canvas_height=canvas.height;
context.clearRect(0,0, canvas_width, canvas_height);
var aCode = this.getCode(); // 验证码所有字符数组
var aLength = aCode.length;//获取到数组的长度
// 绘制codeLength个随机图形
for (var i = 0; i <= (codeLength-1); i++) {
var j = Math.floor(Math.random() * aLength);//获取到随机的索引值 Math.floor(Math.random()*(max-min+1)+min);
var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
var txt = aCode[j];//得到随机的一个内容
show_num[i] = txt;
var x = 10 + i * 20;//文字在canvas上的x坐标
var y = 20 + Math.random() * 8;//文字在canvas上的y坐标(20+0到8的随机数)
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 + ")";
},
dj() {
this.value=''
this.draw(this.show_num);
},
}
}
</script>
<style scoped>
.flex-center {
display: flex;
align-items: center;
}
.margin-t20 {
margin-top: 15px;
}
</style>