<!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() 刷新验证码。
js+canvas制作前端验证码
原文地址：https://www.cnblogs.com/zhaodesheng/p/9729762.html