jquery 通过canvas做一个简单地验证码
1.今天工(xian)作(de)忙(dan)完(teng),看到了项目正在用的一个验证码功能,一直一来是调用api接口返回的图片,突发奇想,也是练练手好久没用canvas,然后趁着前几天刚看的es6语法。几个融合到一起 写了一个小功能的验证码,效果如图:
2.分析需求
1:生成一个带有数字,英文的验证码
2:点击可以刷新验证码
3.思路
1:js随机生成验证码字符串
2:随机画上线条
3:canvas填充到页面
4.问题总结
1:比较懒,字符串集没有用“a,b,c~~”的方式,百度了所需要字符串的unicode码,用js动态生成了所需要的字符串。这个比较实用记录一下。
****html***
<div class="verificationCode"> <div class="test" id="">验证码</div> </div>***js*** this.dataArr1 = ['48-57']; this.dataArr2 = ['65-90','97-122']; this.dataArr3 = ['48-57','65-90','97-122']; //生成随机数的范围 此处this.option.type 就是动态传入的序号 可能为1,2,3 let data = ""; $.each(this["dataArr"+this.option.type],(i,v)=>{ let a = v.split("-"); for(let i = a[0]*1 ; i<=a[1]*1 ; i++){ data += String.fromCharCode(i); } }) return data;
2:canvas的宽度和高度设置问题,写完之后也是纠结了半天。原来是两个高度要分开设置,一个是css中的宽高,一个是标签中的宽高。
5:全部代码
/* * 随机验证码 * DOM 生成验证码存放位置 * option 配置参数 * num 验证码位数 4-6位 默认4位 * type 验证码类型 String 1 数字 2 英文 3 数字英文复合 默认1 * lineNum 干扰线条个数 默认20 * */ "use strict" class verificationCode { constructor(DOM,option){ var defaultOPtion = { num:4, type:1, lineNum:20 }; this.DOM = DOM; this.option = $.extend({},defaultOPtion,option); this.dataArr1 = ['48-57']; this.dataArr2 = ['65-90','97-122']; this.dataArr3 = ['48-57','65-90','97-122']; this.width = DOM.width(); this.height = DOM.height(); this.canvasDom = $(`<canvas id="myCanvas" width='${this.width}' height='${this.height}'>浏览器不支持canvas,请检查</canvas>`); } init(){ this.DOM.html(this.canvasDom[0]); //创建canvas对象 this.initCanvas(); this.clickInit(); } clickInit(){ this.DOM.click(()=>{ this.initCanvas(); }) } initCanvas(){ let that = this, ctx = that.canvasDom[0].getContext('2d'); //改变填充颜色 ctx.fillStyle='#ddd'; ctx.fillRect(0,0,that.width,that.height); //生成干扰线条 if(that.option.lineNum && that.option.lineNum>0){ for(let j=0 ; j<that.option.lineNum ; j++){ ctx.strokeStyle='#fff'; ctx.beginPath(); ctx.moveTo(that.randNum(that.width),that.randNum(that.height)); ctx.lineTo(that.randNum(that.width),that.randNum(that.height)); ctx.lineWidth=0.5; ctx.closePath(); ctx.stroke(); } } //填充文字 ctx.fillStyle='red'; ctx.font='bold 20px Arial'; ctx.fillText(this.rand(),25,25); } rand(){ //生成随机字符串 let that = this, scope = that.randScope(), code = ""; //根据传入的个数 生成随机数 for(let i = 0 ; i < that.option.num ; i++){ code += scope[that.randNum(scope.length)]; } return code; } randScope(){ //生成随机数的范围 let data = ""; $.each(this["dataArr"+this.option.type],(i,v)=>{ let a = v.split("-"); for(let i = a[0]*1 ; i<=a[1]*1 ; i++){ data += String.fromCharCode(i); } }) return data; } randNum(length){ let num = parseInt(Math.random()*length) return num; } new verificationCode($(".test"),{type:3}).init();//生成示例