js+canvas制作前端验证码
Posted web得胜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js+canvas制作前端验证码相关的知识，希望对你有一定的参考价值。
<!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制作前端验证码的主要内容，如果未能解决你的问题，请参考以下文章