效果展示:
源码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #000;
vertical-align: bottom;
}
input{
width:120px;
height:40px;
border: 1px solid #000;
vertical-align: bottom;
padding:0;
text-indent:5px ;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入验证码">
<canvas width="120" height="40"></canvas>
<button>提交</button>
<script>
var canvas=document.getElementsByTagName("canvas")[0];
var ctx=canvas.getContext("2d");
var text="0123456789qwertyuioplkjmhngbfvdcsxaz"
var content="";
var btn=document.getElementsByTagName("button")[0];
var ipt=document.getElementsByTagName("input")[0];
reset();
//定义随机数 指定位置到指定位置
function Mathrandom(min,max){
return parseInt(Math.random()*(max-min+1)+min);
}
// 获取随机颜色
function getRandomColor(min, max) {
var r = Mathrandom(min, max);
var g = Mathrandom(min, max);
var b = Mathrandom(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
// 绘制点
for(var i=0;i<30;i++) {
ctx.beginPath();
ctx.fillStyle=getRandomColor(120,250);
ctx.arc(Mathrandom(3,118),Mathrandom(3,39),1,0,Math.PI*2);
ctx.fill();
}
// 绘制线
for(var i=0;i<5;i++) {
ctx.beginPath();
ctx.strokeStyle=getRandomColor(120,250);
ctx.moveTo(Mathrandom(3,118),Mathrandom(3,39));
ctx.lineTo(Mathrandom(3,118),Mathrandom(3,39));
ctx.stroke();
}
function reset(){
// 绘制数字
for(var i=0;i<4;i++) {
ctx.beginPath();
ctx.fillStyle=getRandomColor(10,50);
ctx.font="20px '微软雅黑'";
var yzm=text[Mathrandom(0,text.length-1)];
content+=yzm;
// ctx.fillText(yzm,i*30+Mathrandom(0,12),Mathrandom(12,30));
ctx.translate(i*30,0);
var deg=Mathrandom(0,30);
ctx.rotate(Math.PI/180*deg);
ctx.fillText(yzm,Mathrandom(0,12),Mathrandom(12,30))
ctx.rotate(-Math.PI/180*deg);
ctx.translate(-i*30,0);
}
}
// 提交点击事件
btn.onclick=function(){
// console.log(ipt.value,content);
if(ipt.value==content){
ctx.clearRect(0,0,120,40);
alert("恭喜您验证成功!");
ipt.value = "";
content="";
reset();
}else{
alert("请输入正确的验证码");
ipt.value = "";
}
}
// 刷新验证码
canvas.onclick=function(){
ctx.clearRect(0,0,120,40);
content=0;
reset();
}
</script>
</body>
</html>