时间:2021-05-25
本文实例为大家分享了js+canvas实现验证码的具体代码,供大家参考,具体内容如下
效果展示:
源码展示:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><style> canvas { border: 1px solid #000; vertical-align: bottom; } input { padding: 0; width: 120px; height: 30px; vertical-align: bottom; border: 1px solid #000; } </style> <input type="text" name="textContent" placeholder="输入"><canvas id="can" width="120" height="30"></canvas><button>提交</button> <script> /*1、背景颜色时随机的 * 2、其中的内容是随机的 * 3、内容的颜色 随机的 * 4、每个字的旋转度数随机的 * 5、文本的大小随机的 * 6、干扰线的位置随机的 * 7、干扰线的颜色随机的 * 8、干扰点 * */ var btn = document.querySelector("button"); var can = document.querySelector("canvas"); var ctx = can.getContext("2d"); var text = "0123456789abcdefghijklmnopqrstuvwsyzABCDEFGHIGKLMNOPQRSTUVWSYZ"; //设置4个内容 将canvas 平分成4分 然后让内容在1/4的空间旋转缩放 //原理 :每次都是位移旋转之后再回复原位 for (var i = 0; i < 4; i++) { var txt = text[randNum(0,text.length-1)]; ctx.fillStyle = getRandColor(80,150); ctx.font=randNum(12,25)+"px '宋体'"; ctx.textBaseline = "top"; var x = randNum(0,10); var deg = randNum(-30,30); ctx.translate(x+30*i,0); ctx.rotate(Math.PI/180*deg); ctx.fillText(txt,0,0); ctx.rotate(Math.PI/180*-deg); ctx.translate(-(x+30*i),0); } for(var i=0;i<30;i++){ ctx.beginPath(); ctx.arc(randNum(0,120),randNum(0,30),1,0,Math.PI*2); ctx.fillStyle=getRandColor(150,180); ctx.fill(); } for(var i=0;i<4;i++){ ctx.beginPath(); ctx.moveTo(randNum(0,120),randNum(0,30)); ctx.lineTo(randNum(0,120),randNum(0,30)); ctx.strokeStyle=getRandColor(150,180); ctx.lineWidth= randNum(1,2); ctx.stroke(); } // a 先获取一个随机数 console.log(Math.random()); //产生一个0~1之间的随机小数 var num = Math.random() * (100 - 30 + 1) + 30; //产生一个随机数30~100 之间的数 console.log(num); // b 获取一个区间段的随机数(整数) function randNum(min, max) { return parseInt(Math.random() * (max - min + 1) + min); } // c获取随机颜色值 function getRandColor(min, max) { var R = randNum(min, max); var G = randNum(min, max); var B = randNum(min, max); return 'rgb(' + R + ',' + G + ',' + B + ')'; } </script> </body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js+h5canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一、使用技术原生js技术+html5canvas画图利用Ma
本文实例为大家分享了js+canvas实现下雪效果的具体代码,供大家参考,具体内容如下效果展示:源码展示:canvas下雪效果(原生js)*{margin:0;
在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是:1.生成一张画布canvas2.生成随机数验证码3.在画布中生
本文实例为大家分享了js实现验证码干扰的具体代码,供大家参考,具体内容如下效果代码*{padding:0;margin:0;}canvas{background
废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示:1.jsvarcode="";//在全局定义验证码functioncreateCode(