javaScript制作验证码

最新推荐文章于 2023-04-04 21:31:55 发布

原创最新推荐文章于 2023-04-04 21:31:55 发布 · 334 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#验证码 #js #canvas #简单 #jq

本文介绍了一种使用HTML和JavaScript生成动态验证码的方法。通过Canvas元素绘制随机字符，并设置了字体大小、颜色及干扰线段等特性以提高验证码的安全性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html文件

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>验证码</title>
<script type="application/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="application/javascript" src="js/canvas.js"></script>
</head>
<body>
<div class="code">
<canvas id="canvas" width="150" height="20" style="background:rgba(168, 199, 40, 0.54)">
<p>your brows is not support canvas</p>
</canvas>

</div>
<div class="reset">
<input type="button" value="刷新" class="res">
</div>
</body>
</html>

<script>
$(function(){
var canvas=document.getElementById("canvas");
draw(canvas);
})
$(".res").click(function(){
var canvas=document.getElementById("canvas");
if(canvas.getContext){
var context=canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
draw(canvas);
}
})

//setSize(10,20);

//setDistance(30);

</script>

js文件

var fontSizeMin;
var fontSizeMax;
var distance;
function rn(min,max){
return parseInt(Math.random()*(max-min),10)+min;
}
function rc(min,max){
var r=rn(min,max);
var g=rn(min,max);
var b=rn(min,max);
return `rgb(${r},${g},${b})`;
}
function draw(canvas){
if(canvas.getContext){
var arr=[1,2,3,4,5,6,7,8,9,0,'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'];
var context=canvas.getContext("2d");
for(var i=0;i<4;i++){
var str=arr[rn(0,arr.length)];//获取数字
var deg=rn(-30,30);//获取斜率
context.fillStyle=rc(0,180);//设置颜色
context.font=rn(fontSizeMin||18,fontSizeMax ||28)+'px Simhei';//字体大小
context.textBaseline="Alphabetic";
context.save();
context.translate((distance||30)*i+15,15);
context.rotate(deg*Math.PI/180);
context.fillText(str,0,0,10);
context.restore();
}
//设置干扰线段
for(var i=0;i<5;++i){
context.beginPath();
context.moveTo(rn(0,canvas.width),rn(0,canvas.height));
context.lineTo(rn(0,200),rn(0,50));
context.strokeStyle=rc(150,200);
context.closePath();
context.stroke()
}
}
//设置干扰点
for(var i=0;i<20;++i){
context.beginPath();
context.arc(rn(0,canvas.width),rn(0,canvas.height),1,0,2*Math.PI);
context.fillStyle=rn(150,200);
context.closePath();
context.stroke();

}
}
function setSize(min,max){
fontSizeMin=min;
fontSizeMax=max;
}
function setDistance(dis){
distance=dis;
}

待页面创建成功canvas后，获取canvas: document.getElementById("canvas"),调用draw(canvas),传入canvas.设置文字大小，调用setSize();将文字的最小值，最大值传入；默认min18,max 28。setDistance（）设置字间距。