js+canvas制作前端驗證碼
阿新 • • 發佈：2018-09-30
font ext ots char ack urn change context ++
<!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制作前端驗證碼