js+canvas实现验证码功能
2018-10-15 18:07
阅读：683
刚刚开始接触canvas，写个验证码小功能练练手，实现效果图如下：
主要代码如下:
html
<!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> <link rel=stylesheet href=index.css rel=external nofollow > </head> <body> <div class=wrapper> <div class=inputBox> <input type=text class = inputCaptcha placeholder = 请输入验证码> <span class=captchaIcon></span> </div> <p class=errorText></p> <div class=canvasBox> <div class=imageBox> <canvas width =300 height=80 id = canvasCaptcha></canvas> <input type=button class=refresh> </div> </div> <button class=captchaSubmit>submit</button> </div> <script src=./jquery.js></script> <script src= ./index.js></script> </body> </html>css
js
var arr = [0,1,2,3,4,5,6,7,8,9]; for(var i = 65;i < 122;i++){ if(i>90&&i<97){ continue; } arr.push(String.fromCharCode(i)); } //每个验证码可能出现的字母或数字(区分大小写) var len = arr.length; //验证码的长度 var canvasStr,value; //验证码值 function createCanvas(){ canvasStr = ; value = ; for(var i =0 ;i < 6;i++){ var a = arr[Math.floor(Math.random()*len)]; canvasStr += a+ ; value += a; } //canvas var oCanvas = document.getElementById(canvasCaptcha); var ctx = oCanvas.getContext(2d); var w = oCanvas.width; var h = oCanvas.height; var oImg = new Image(); oImg.src= ./images/bg.jpg; oImg.onload = function(){ var pattern = ctx.createPattern(oImg,repeat); ctx.fillStyle = pattern; ctx.fillRect(0,0,w,h); ctx.fillStyle = #ccc; ctx.textAlign = center; ctx.font = 46px Roboto Slab; ctx.setTransform(1,-0.12,0.2,1,0,12); ctx.fillText(canvasStr,w/2,60); } } createCanvas(); //验证输入的验证码与图中验证码时候相等 function captcha(e){ if(e == value){ return true; } else{ return false; } } //点击提交按钮时的结果 function showResult(){ var inputValue = $(.inputCaptcha).val(); if(inputValue == inputValue == null inputValue == undefined){ $(.errorText).css({display:inline-block}).html(验证码不能为空,请重新输入!); $(.captchaIcon).css({display:inline-block,backgroundImage:url(./images/false.png)}); }else{ var flag = captcha(inputValue); if(!flag){ $(.errorText).css({display:inline-block}).html(验证码错误,请重新输入!); $(.captchaIcon).css({display:inline-block,backgroundImage:url(./images/false.png)}); }else{ $(.captchaIcon).css({display:inline-block,backgroundImage:url(./images/true.png)}); } } } $(.captchaSubmit).click(showResult);//提交 $(.refresh).click(createCanvas);//刷新 //点击input框 $(.inputCaptcha).focus(function(){ $(.errorText).add($(.captchaIcon)).fadeOut(100); })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
上一篇：js小技巧--自动隐藏红叉叉
评论
亲，登录后才可以留言！