我们在做开发的时候会经常涉及到验证码，前端的验证码需要用到HTML5中的canvas的知识点，然后再结合js来控制验证数字就可以达到验证码的效果了.
- 随机生成一张canvas画布
- 生成随机验证码
- 在画布中随机生成干扰线
- 把随机验证码放到画布上面
- 点击更换验证码
结构与样式：
1 <style>
2 #mycanvas{
3 cursor: pointer;/*光标为手型*/
4 }
5 </style>
6 </head>
7 <body>
8 <canvas id="mycanvas" width=‘500‘ height=‘100‘></canvas>
js代码：
/*生成4位随机数*/
function rand(){
var str="abcdefghijklmnopqrstuvwxyz0123456789";
var arr=str.split("");
var validate="";
var ranNum;
for(var i=0;i<5;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();
};
效果图：
大功告成，假如你不喜欢背景颜色或者线条的颜色可以稍微更改。
时间： 2024-10-27 07:04:05