canvas实现随机验证码
程序员文章站
2022-06-07 15:00:24
canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 随机抽取不重复的6位数字组成验证码字符串 效果图 html: css: js: javascrip ......
canvas实现随机验证码
知识点
- canvas生成背景图和文字 设置字体样式和大小
- string的fromcharcode(code码)生成大小写字母和数字 str.tolowercase()转小写
- 随机抽取不重复的6位数字组成验证码字符串
- 效果图
html:
<div class="wraper"> <input type="text" maxlength="6" placeholder="请输入验证码,不区分大小写" class="input"> <span class="icon"></span> <p class="error">验证码输入有误,请重新输入</p> <div class="canvas-box"> <canvas id="mycanvas" width="200" height="50"></canvas> <input type="button" class="refresh"> </div> <div class="btn"> <button class="submit">提交</button> </div> </div>
css:
* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: hotpink; display: flex; justify-content: center; align-items: center; } .wraper { width: 345px; margin: 30px; padding: 15px; border-radius: 5px; border: 1px solid #ccc; background: #fff; } .input { width: 300px; padding: 15px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; } .icon { float: right; width: 20px; height: 20px; margin-top: 13px; background: url('./img/yes.png') no-repeat; background-size: 100% 100%; display: none; } .error { margin-top: 10px; color: red; font-size: 12px; display: none; } .canvas-box { margin-top: 15px; position: relative; } #mycanvas { width: 300px; height: 60px; } .canvas-box .refresh { position: absolute; right: 0; top: 50%; margin-top: -10px; display: inline-block; width: 20px; height: 20px; background: url('./img/refresh.png') no-repeat; background-size: 100% 100%; border: none; outline: none; cursor: pointer; } .btn { margin-top: 15px; } .btn .submit { width: 80px; height: 40px; border-radius: 5px; background: blue; color: #fff; border: none; outline: none; cursor: pointer; }
js:
var arr = []; //筛选验证码的数组 var value = ''; //48-57 数字 65-90 大写字母 97-122 小写字母 for (var i = 48; i <= 57; i++) { arr.push(string.fromcharcode(i)); } for (let i = 65; i <= 90; i++) { arr.push(string.fromcharcode(i)); } for (let i = 97; i <= 122; i++) { arr.push(string.fromcharcode(i)); } //生成随机验证码 function getverification() { var codestr = ''; var codearr = []; value = ''; while (true) { let a = math.floor(math.random() * arr.length); if (codearr.indexof(a) == -1) { codearr.push(arr[a]); } if (codearr.length == 6) { break; } } codestr = codearr.join(' '); value = codearr.join('').tolowercase(); console.log(value) var mycanvas = document.getelementbyid('mycanvas'); var ctx = mycanvas.getcontext('2d'); var img = new image(); img.src = './img/bg_pic.jpg'; img.onload = function() { var pat = ctx.createpattern(img, 'no-repeat'); ctx.fillstyle = pat; ctx.fillrect(0, 0, mycanvas.width, mycanvas.height); ctx.textalign = 'center'; ctx.fillstyle = '#ccc'; ctx.font = '30px roboto slab'; ctx.settransform(1, -0.12, 0.3, 1, 0, 12); ctx.filltext(codestr, mycanvas.width / 2, 35); } } getverification(); //事件 var refresh = document.getelementsbyclassname('refresh')[0]; var submit = document.getelementsbyclassname('submit')[0]; var inputvalue = document.getelementsbyclassname('input')[0]; var icon = document.getelementsbyclassname('icon')[0]; var error = document.getelementsbyclassname('error')[0]; refresh.onclick = function() { getverification(); } submit.onclick = function() { if (inputvalue.value.tolowercase() === value) { icon.style.display = 'inline-block'; icon.style.background = "url('./img/yes.png') no-repeat"; icon.style.backgroundsize = "100% 100%"; error.style.display = 'none'; getverification(); } else { icon.style.display = 'inline-block'; icon.style.background = "url('./img/error.png') no-repeat"; icon.style.backgroundsize = "100% 100%"; error.style.display = 'block'; inputvalue.value = ''; } }
参考至腾讯课堂渡一教育
下一篇: IOS开发(68)之捕获点击划屏手势