<!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>Document</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(0,255);
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;
// console.log(letterSpace);
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(100, 200);
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<4; 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(0, 255);
this.ctx.lineWidth = Math.ceil(Math.random()*2);
this.ctx.stroke();
}
}
//画干扰点
drawInterferencePoint(){
var r = 4;
var num = this.canvas.width*this.canvas.width / 1000;
// console.log(num)
for(var i = 0; i < Math.floor(num); i++){
this.ctx.beginPath();
this.ctx.fillStyle = this.randomColor(0,255);
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>
