canvas验证码![](https://i-blog.csdnimg.cn/blog_migrate/bdfdb8ee6d622bc691a79f4ad0c48db6.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #ccc;
}
canvas{
margin-left: 100px;
margin-top: 30px;
}
input{
width: 150px;
height: 40px;
position:absolute;
top: 30px;
left: 230px;
}
button{
position:absolute;
top: 32px;
left: 390px;
padding:10px;
background-color: pink;
cursor: pointer;
border:none;
}
</style>
</head>
<body>
<canvas width="120" height="40" style="border:1px solid #000"></canvas>
<input type="text" placeholder="请输入图片内字符">
<button>点我验证</button>
<script>
var can=document.getElementsByTagName("canvas")[0];
var inp=document.getElementsByTagName("input")[0];
var btn=document.getElementsByTagName("button")[0];
var ctx=can.getContext("2d");
var str="qwertyuiopasdfghjklzxcvbnm1234567890";
var deg=Math.PI/180*getRandom(-10,30);
var countent="";
reset();
function reset(){
for(var i=0;i<8;i++){
ctx.beginPath();
ctx.fillStyle=getColor(150,230);
ctx.arc(getRandom(5,115),getRandom(5,35),3,0,Math.PI*2);
ctx.fill();
}
for(var i=0;i<6;i++){
ctx.beginPath();
ctx.strokeStyle=getColor(150,230);
ctx.moveTo(getRandom(5,115),getRandom(5,35));
ctx.lineTo(getRandom(5,115),getRandom(5,35));
ctx.stroke();
}
for(var i=0;i<4;i++) {
ctx.beginPath();
ctx.fillStyle = getColor(80, 120);
var text = str[parseInt(Math.random() * (str.length - 1))];
countent += text;
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.font = "18px '楷体'";
ctx.translate(i * 30, 0);
ctx.rotate(deg);
ctx.fillText(text, getRandom(11, 20), getRandom(2, 20));
ctx.rotate(-deg);
ctx.translate(-i * 30, 0);
ctx.stroke();
}
}
btn.onclick=function(){
if(inp.value==countent){
alert("验证码正确");
inp.value="";
ctx.clearRect(0,0,120,40);
countent="";
reset();
}else{
alert("验证码有误");
inp.value="";
}
}
function getRandom(min,max){
return parseInt(Math.random()*(max-min+1)+min);
}
function getColor(min,max){
var r=getRandom(min,max);
var g=getRandom(min,max);
var b=getRandom(min,max);
return "rgb("+r+","+g+","+b+")";
}
</script>
</body>
</html>