效果图如下：
<!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>