CSS3 Canvas实现一个带干扰线条的随机数验证码

迷南。 2022-06-15 04:29 442阅读 0赞

工作中接到的任务是做一个带干扰项的验证码，首先想到的是利用H5的canvas来实现。  
本想直接网上copy一段代码，但很多都不符合需求，索性自己写了，代码如下。

<canvas class="codeimg" id="codeimg" style="width: 120px;height: 36px">
        Your browser does not support the canvas element.
    </canvas>   
    
    <script type="text/javascript"> var code = ""; $().ready(function() { //将函数返回值赋给code code = createCode(); //点击canvas图片更换验证码 $("#codeimg").click(function () { createCode(); }); /*随机字符函数*/ function rand(){ //去掉i,I,l,o,O等易混淆字母 var str="abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ 0123456789"; //将字符串分隔为数组 var arr=str.split(""); //随机字符在[0,56]之间 var ranNum=Math.floor(Math.random()*57); var captcha=arr[ranNum]; return captcha; } /*随机干扰线条函数*/ function drawline(canvas, context) { //若省略beginPath，则每点击一次验证码会累积干扰线的条数 context.beginPath(); //起点与终点在canvas宽高内随机 context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); context.lineWidth = 1; context.strokeStyle = '#275DB3'; context.stroke(); } /*生成验证码*/ function createCode(){ //每次生成code先将其清空防止叠加 code = ""; var canvas = document.getElementById("codeimg"); var context = canvas.getContext("2d"); context.strokeStyle = "#FFF"; context.strokeRect(0, 0, canvas.width, canvas.height); //生成干扰线，数量随意 for (var i = 0; i < 20; i++) { drawline(canvas, context); } //循环生成5位验证码 for (var k = 0; k < 5; k++) { context.font='76px Arial'; //将初始状态保存 context.save(); //获得-1到1的随机数 var rA = 1-Math.random()*2; //获取随机倾斜角 var angle = rA / 8 ; var ranNum = rand(); //旋转生成的随机字符 context.rotate(angle); //把rand()生成的随机数文本依次填充到canvas中，注意x坐标 context.fillText(ranNum,20+45*k,100); //恢复初始状态，以便下一次循环 context.restore(); code += ranNum; } //返回生成的验证码字符串 return code; } } </script>

其中code变量是用来验证用户输入值是否与验证码一致，作为登录验证的条件，代码很简单就不贴出来了。  
最后看看效果图：  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20220615/cb06e49c5c4f432d84057731c5b68cbb.png