微客导航 » 文章资讯 » 使用canvas及js简单生成验证码方法

使用canvas及js简单生成验证码方法

2024-02-26 08:12:03 134

在很多时候都需要用到验证码，前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是：

1.生成一张画布canvas

2.生成随机数验证码

3.在画布中生成干扰线

4.把验证码文本填充到画布中

5.点击画布更换验证码

结构与样式：


您的浏览器不支持canvas，请换个浏览器试试~

下面来编写js代码：

/*生成4位随机数*/
functionrand(){
varstr="abcdefghijklmnopqrstuvwxyz0123456789";
vararr=str.split("");
varvalidate="";
varranNum;
for(vari=0;i<4;i++){
ranNum=Math.floor(Math.random()*36);//随机数在[0,35]之间
validate+=arr[ranNum];
}
returnvalidate;
}
/*干扰线的随机x坐标值*/
functionlineX(){
varranLineX=Math.floor(Math.random()*90);
returnranLineX;
}
/*干扰线的随机y坐标值*/
functionlineY(){
varranLineY=Math.floor(Math.random()*40);
returnranLineY;
}
functionclickChange(){
varmycanvas=document.getElementById('mycanvas');
varcxt=mycanvas.getContext('2d');
cxt.fillStyle='#000';
cxt.fillRect(0,0,90,40);
/*生成干扰线20条*/
for(varj=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='bold20pxArial';
cxt.fillText(rand(),25,25);//把rand()生成的随机数文本填充到canvas中
}
clickChange();
/*点击验证码更换*/
mycanvas.onclick=function(e){
e.preventDefault();//阻止鼠标点击发生默认的行为
clickChange();
};

这样就写好一个较普通的验证码了，当然也有很多需要优化的地方，比如干扰线的随机颜色、可以加干扰点以及文本的随机位置随机颜色等等。赶紧去试试吧~

返回顶部
3162201930
czq8825@qq.com

使用canvas及js简单生成验证码方法

热门推荐

随机推荐