效果图如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>验证码</title>
</head> <body>
<canvas id="canvas"></canvas>
</body> </html> <script>
class IdentifyCode {
constructor(canvasId, width, height) {
this.canvas = document.querySelector(`#${canvasId}`);
this.ctx = this.canvas.getContext("2d");
this.canvas.width = width;
this.canvas.height = height;
this.arrRange = [];
this.code = "";
this.range();
this.buildCode();
this.drawBakcGround();
this.drawInterferingline();
this.drawInterferencePoint();
this.drawWord();
}
//生成一个随机数 randomNum(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
//生成随机颜色
randomColor(min, max) {
var r = this.randomNum(min, max);
var g = this.randomNum(min, max);
var b = this.randomNum(min, max);
return `rgb(${r},${g},${b})`
}
//生成字母和数字
range() {
this.arrRange = [];
//0-9
for (let i = "0".charCodeAt(0); i <= "9".charCodeAt(0); i++) {
this.arrRange.push(String.fromCharCode(i))
}
//A-Z
for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
this.arrRange.push(String.fromCharCode(i));
}
//a-z
for (let i = "a".charCodeAt(0); i < "z".charCodeAt(0); i++) {
this.arrRange.push(String.fromCharCode(i))
}
} //生成四位随机码
buildCode() {
var code = "";
for (let i = 0; i < 4; i++) {
code += this.arrRange[Math.floor(Math.random() * this.arrRange.length)]
}
this.code = code;
} //画背景
drawBakcGround() {
this.ctx.fillStyle = this.randomColor(180, 230);
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.fill()
}
//写字
drawWord() {
var bothSide = 15;//两边间距
var letterSpace = (this.canvas.width - 2 * bothSide) / 4;
for (var i = 0; i < 4; i++) {
this.ctx.font = `${this.randomNum(this.canvas.width / 4, this.canvas.width / 2)}px 黑体`;
this.ctx.fillStyle = this.randomColor(80, 150);
this.ctx.save();
this.ctx.translate(bothSide + letterSpace * i, this.canvas.height / 2)
this.ctx.rotate(Math.random() * (Math.PI / 6) * (-1) ** (Math.round(Math.random())));
this.ctx.textBaseline = "middle";
this.ctx.fillText(this.code[i], 0, 0);
this.ctx.restore();
} }
//画干扰线
drawInterferingline() {
for (var i = 0; i < 6; i++) {
this.ctx.beginPath();
this.ctx.moveTo(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height));
this.ctx.lineTo(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height));
this.ctx.closePath();
this.ctx.strokeStyle = this.randomColor(180, 230);
this.ctx.lineWidth = Math.ceil(Math.random() * 2);
this.ctx.stroke();
}
}
//画干扰点
drawInterferencePoint() {
var r = 1;
var num = 40;
for (var i = 0; i < Math.floor(num); i++) {
this.ctx.beginPath();
this.ctx.fillStyle = this.randomColor(150, 200);
console.log(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height), r, 0, 2 * Math.PI, true)
this.ctx.arc(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height), r, 0, 2 * Math.PI, true)
this.ctx.fill();
this.ctx.closePath();
}
}
//更换验证码
update() {
this.clear();
this.range();
this.buildCode();
this.drawBakcGround();
this.drawInterferingline();
this.drawInterferencePoint();
this.drawWord();
} //清除
clear() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
}
} var identifyCode = new IdentifyCode("canvas", 100, 40); document.querySelector("#canvas").onclick = function () {
identifyCode.update()
}
</script>