时间:2021-07-01 10:21:17 帮助过:15人阅读
- <canvas id="mycanvas" width='90' height='40'>
- 您的浏览器不支持canvas,请换个浏览器试试~
- </canvas>
- <style>
- #mycanvas{
- cursor: pointer;
- }
- </style>
- /*生成4位随机数*/
- function rand(){
- var str="abcdefghijklmnopqrstuvwxyz0123456789";
- var arr=str.split("");
- var validate="";
- var ranNum;
- for(var i=0;i<4;i++){
- ranNum=Math.floor(Math.random()*36); //随机数在[0,35]之间
- validate+=arr[ranNum];
- }
- return validate;
- }
- /*干扰线的随机x坐标值*/
- function lineX(){
- var ranLineX=Math.floor(Math.random()*90);
- return ranLineX;
- }
- /*干扰线的随机y坐标值*/
- function lineY(){
- var ranLineY=Math.floor(Math.random()*40);
- return ranLineY;
- }
- function clickChange(){
- var mycanvas=document.getElementById('mycanvas');
- var cxt=mycanvas.getContext('2d');
- cxt.fillStyle='#000';
- cxt.fillRect(0,0,90,40);
- /*生成干扰线20条*/
- for(var j=0;j<20;j++){
- cxt.strokeStyle='#fff';
- cxt.beginPath(); //若省略beginPath,则每点击一次验证码会累积干扰线的条数
- cxt.moveTo(lineX(),lineY());
- cxt.lineTo(lineX(),lineY());
- cxt.lineWidth=0.5;
- cxt.closePath();
- cxt.stroke();
- }
- cxt.fillStyle='red';
- cxt.font='bold 20px Arial';
- cxt.fillText(rand(),25,25); //把rand()生成的随机数文本填充到canvas中
- }
- clickChange();
- /*点击验证码更换*/
- mycanvas.onclick=function(e){
- e.preventDefault(); //阻止鼠标点击发生默认的行为
- clickChange();
- };
以上就是如何使用canvas和js完成验证码的生成方法介绍的详细内容,更多请关注Gxl网其它相关文章!