代码:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../js/jquery-3.2.1.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>验证码</title>
</head>
<body>
<div style="text-align: center;">
<form id="private_form" name="own_form">
<p> <input type="text" name="username" placeholder="input username"> </p>
<p> <input type="password" name="password" placeholder="input password"> </p>
<div>
<p style="font-size: 12px;">点击下图可刷新验证码</p>
<canvas id="canvas" style="margin-top: 0%; background-color: aquamarine;">
</canvas>
<p> <input type="text" name="validateCode" placeholder="输入图中的验证码" maxlength="5"> </p>
</div>
<p> <input type="button" id="own_button" value="OK"> </p>
</form>
</div>
</body>
<script>
//document.ready
$(function() {
var show_num=new Array();
draw(show_num);
console.log('validate code:'+show_num);
$('#canvas').on('click',function () {
draw(show_num);
})
function draw(show_num) {
var canvas_width=$('#canvas').width();
var canvas_height=$('#canvas').height();
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");//获取canvas画图的环境
canvas.width=canvas_width;
canvas.height=canvas_height;
var srcCode="A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z"+
",a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"+
",1,2,3,4,5,6,7,8,9,0";
var aloneCode=srcCode.split(',');
//console.log('aloneCode- '+aloneCode);
var aloneCodeLen=aloneCode.length;
for (var index = 0; index <= 4; index++) {
var j=Math.floor(Math.random()*aloneCodeLen);//得到随机的索引
var txt=aloneCode[j];
//console.log("txt- "+txt);
show_num[index]=txt;
var deg=Math.random()*30*Math.PI/180;//产生0~30的随机弧度
var x=10+index*36;//字符在canvas上的x座标
var y=20+Math.random()*8;//字符在canvas上的y座标
context.font="bold 33px 微软雅黑";
context.translate(x+5,y+5);
context.rotate(deg);
context.fillStyle=randomColor();
context.fillText(txt,0,0);
context.translate(-x+10*1.5,-y+10*2.5);
context.rotate(-deg);
}
//验证码上显示线条
for (var index = 0; index <= 5; index++) {
context.strokeStyle=randomColor(); //stroke 一击,轻触,抚摸
context.beginPath();
context.moveTo(Math.random()*canvas_width,Math.random()*canvas_height);
context.lineTo(Math.random()*canvas_width,Math.random()*canvas_height);
context.stroke();
}
//验证码上显示小点
for (var index = 0; index < 60; index++) {
context.strokeStyle=randomColor();
context.beginPath();
var x=Math.random()*canvas_width;
var y=Math.random()*canvas_height;
context.moveTo(x,y);
context.lineTo(x+1,y+1);
context.stroke();
}
//得到随机的颜色值
function randomColor() {
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
return 'rgb('+r+','+g+','+b+','+')';
}
}
//检视变量类型
console.log('typeof(show_num): '+typeof(show_num+''));
//点击校验验证码
$('#own_button').click(function() {
verifyValidateCode();
})
function verifyValidateCode() {
// 注意要选对表单ID
var v=document.forms['own_form']['validateCode'].value;
if (v==''||v==null) {
alert('验证码未输入');
return;
}
v=v.toLowerCase();
var vcStr=show_num+'';
vcStr=vcStr.toLowerCase();
vcStr=vcStr.replace(/,/g,'');//去除字符串中的所有逗号
console.log('typeof(vcStr):'+typeof(vcStr))
console.log('提交的验证码: '+vcStr);
console.log(v===vcStr);
if (v===vcStr) {
console.log('验证码正确')
return true;
}else{
alert('输入的验证码错误')
return false;
}
}
})
</script>
</html>