<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>验证码</title>
</head> <body>
<canvas id="identify"></canvas>
<button id="changeCode">看不清，换一个</button>
</body>
<script type="text/javascript">
class IdentifyCode {
constructor(canvasId, width, height) {
this.width = width;
this.height = height;
this.canvas = document.querySelector(canvasId);
this.ctx = this.canvas.getContext("2d");
this.code = "";
this.codeRange = []; this.generateCodeRange();
this.freshCode();
} //
initCanvas() {
this.canvas.width = this.width;
this.canvas.height = this.height;
} // 生成随机色
randomColor() {
var colorStr = "#";
for(let i = 0; i < 6; i++) {
colorStr += Math.floor(Math.random() * 16).toString(16);
}
return colorStr;
} // 生成二维码字母范围
generateCodeRange() {
var codeRange = [];
for(let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
codeRange.push(String.fromCharCode(i));
}
for(let i = "a".charCodeAt(0); i <= "z".charCodeAt(0); i++) {
codeRange.push(String.fromCharCode(i));
}
for(let i = "0".charCodeAt(0); i <= "9".charCodeAt(0); i++) {
codeRange.push(String.fromCharCode(i));
}
this.codeRange = codeRange;
// return codeRange;
} // 生成四位随机数
randomCode() {
this.code = "";
var len = this.codeRange.length;
for(let i = 0; i < 4; i++) {
this.code += this.codeRange[Math.floor(Math.random() * len)];
}
} // 画背景色
drawBackground() {
var bgColor = "#b0aa93";
// console.log(bgColor)
this.ctx.rect(0, 0, this.width, this.height);
this.ctx.fillStyle = bgColor;
this.ctx.fill();
} // 画干扰线
drawDisturbLines() {
for(let i = 0; i < 4; i++) {
this.drawOneLine();
}
}
drawOneLine() {
var startX = Math.floor(Math.random() * this.width);
var startY = Math.floor(Math.random() * this.height);
var endX = Math.floor(Math.random() * this.width);
var endY = Math.floor(Math.random() * this.height);
this.ctx.strokeStyle = this.randomColor();
this.ctx.lineWidth = Math.ceil(Math.random() * 2);
this.ctx.beginPath();
this.ctx.moveTo(startX, startY);
this.ctx.lineTo(endX, endY);
this.ctx.closePath();
this.ctx.stroke();
} // 画干扰点
drawDisturbDots() {
for(let i = 0, count = this.width * this.height / 100; i < count; i++) {
this.drawOneDot();
}
}
drawOneDot() {
var ox = Math.floor(Math.random() * this.width);
var oy = Math.floor(Math.random() * this.height);
this.ctx.fillStyle = this.randomColor();
this.ctx.beginPath();
this.ctx.arc(ox, oy, 1, 0, 2 * Math.PI);
this.ctx.closePath();
this.ctx.fill();
} // 画文字(数字或字母)
drawLetters() {
for(let i = 0, len = this.code.length; i < len; i++) {
let offsetX = this.width * 0.15; // 中间的70%画字母，两边各15%
let offsetY = this.height * 0.15;
let lineHeight = this.height * 0.7;
let x = i * this.width * 0.7 / this.code.length + offsetX;
let y = this.height / 2;
let letter = this.code[i];
let fontSize = Math.min(parseInt(this.height), parseInt(this.width * 0.7));
//console.log(fontSize)
this.drawOneLetter(letter, x, y, fontSize);
}
}
drawOneLetter(letter, x, y, fontSize) {
this.ctx.font = fontSize + "px Times new roman";
this.ctx.textBaseline = "middle";
this.ctx.fillStyle = this.randomColor();
this.ctx.fillText(letter, x, y);
} // 更换一个验证码
freshCode() {
this.clear();
this.randomCode();
//console.log(this.code);
this.initCanvas();
this.drawBackground();
this.drawDisturbLines();
this.drawDisturbDots();
this.drawLetters();
} // 清除画布
clear() {
this.ctx.clearRect(0, 0, this.width, this.height);
}
}
</script>
<script type="text/javascript">
var identifyCode = new IdentifyCode("#identify", 100, 40);
console.log(identifyCode.code);
var changeCode = document.querySelector("#changeCode");
changeCode.onclick = function() {
identifyCode.freshCode();
console.log(identifyCode.code);
}
</script> </html>
使用方法：
1. new IdentifyCode("canvas的选择器","canvas的宽","canvas的高");
2. 将用户输入的验证码.toLowerCase()与identifyCode.code.toLowerCase()对比正误。
3. identifyCode.freshCode() 刷新验证码。