图形验证码
程序员文章站
2022-05-13 09:49:10
...
Html：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/prvnum.css">
</head>
<body>
<div class="pro_box">
<input type="text" name="" id="input" class="input" placeholder="请输入验证码">
<div class="cav" title="点击更换验证码">
<canvas width="80" height="24" id="myCanvas"></canvas>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/prvnum.js" ></script>
</html>Css：
*{
margin: 0;
padding: 0;
}
.pro_box{
margin: 20px auto;
width: 214px;
height: 24px;
}
.input{
float: left;
width: 120px;
height: 20px;
}
.cav{
float: left;
margin-left: 10px;
width: 80px;
height: 24px;
}Js：
var code = ""; //在全局定义验证码
/**创建验证码**/
buildProve();
$(".cav").click(function(){
buildProve();
});
/**校验验证码**/
$(document).keydown(function(event){ //按下回车键执行校验
if(event.keyCode == 13){
numProve(); //校验验证码
}
});
/**绘制验证码**/
function buildProve(){
code = ""; //清空验证码
var cav_w = $("#myCanvas").width(); //获取画布宽度
var cav_h = $("#myCanvas").height(); //获取画布高度
var canvas = $("#myCanvas")[0]; //获取界面的画布
var ctx=canvas.getContext("2d"); //获取画布的上下文对象
/**绘制画布**/
ctx.textBaseline = "middle"; //绘制文本基准线
ctx.fillStyle = randomColor(180, 240); //随机选取颜色作为画布背景
ctx.fillRect(0,0,cav_w,cav_h); //绘制“填色”的矩形
/**绘制验证码文本**/
var txtArr = new Array(0,1,2,3,4,5,6,7,8,9,'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','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');//随机数
for(var i = 1;i <= 4; i++){
var index = Math.floor(Math.random()*txtArr.length); //取得随机数的索引（0~61）
var txt = txtArr[index]; //获取随机文本
code += txt; //存入验证码
ctx.font = randomNum((cav_h/2),cav_h) + 'px SimHei'; //随机生成字体大小
ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
//为文本设置阴影效果
ctx.shadowOffsetX = randomNum(-3, 3);
ctx.shadowOffsetY = randomNum(-3, 3);
ctx.shadowBlur = randomNum(-3, 3);
ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
//计算文本放置的坐标、旋转角度数据
var x = cav_w / 5 * i;
var y = cav_h / 2;
var deg = randomNum(-30, 30);
//设置坐标原点与旋转角度
ctx.translate(x, y); //设置原点
ctx.rotate(deg * Math.PI / 180); //设置旋转角度
//渲染文本
ctx.fillText(txt, 0, 0);
//重置坐标原点与旋转角度
ctx.rotate(-deg * Math.PI / 180); //重置原点
ctx.translate(-x, -y); //重置旋转角度
}
/**绘制干扰线**/
var disturb_line = 4; //设置干扰线数量
for(var i = 0;i < disturb_line;i++){
ctx.strokeStyle = randomColor(40, 180); //为干扰线设置颜色
ctx.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径
ctx.moveTo(randomNum(0, cav_w), randomNum(0, cav_h)); //l路径起点
ctx.lineTo(randomNum(0, cav_w), randomNum(0, cav_h)); //路径转折点或结束点
ctx.stroke(); //渲染线条(笔触)
}
/**绘制干扰点**/
var disturb_dot = 20; //设置干扰点数量
for(var i = 0; i < disturb_dot; i++) {
ctx.fillStyle = randomColor(0, 255); //为干扰点设置颜色
ctx.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径
ctx.arc(randomNum(0, cav_w), randomNum(0, cav_h), 1, 0, 2 * Math.PI); //arc()创建弧/曲线（用于创建圆或部分圆）
ctx.fill(); //渲染点(填充)
}
}
/**随机生成一个数值**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min); //随机选取（min，max）区间的数值
}
/**随机生成一种颜色**/
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
/**验证验证码**/
function numProve(){
code = code.toUpperCase(); //将存好的验证码转为大写
var input = $("#input").val().toUpperCase(); //将输入的验证码转为大写
if(code == input){
alert("OK");
}else{
alert("Error");
$("#input").val(""); //清空文本框
}
}
上一篇： 图形验证码
下一篇： 泡茶的水温度多少最好？如何判断泡茶水温？