通过canvas画简单的验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{
border: 1px solid blue;
background: pink;
}
</style>
</head>
<body>
<canvas id="canvas" width="100" height="20">
不支持canvas
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//随机字符（透明度，大小随机，位置随机，随机颜色，
//干扰项，10个左右的随机，半径随机，位置随机，有部分在画布上干扰图
//
var strState="abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWSYZ1234567890";
function randNum(min,max){
return parseInt(Math.random()*(max-min)+min)
}
for(var i=0;i<5;i++){
var fontSize=randNum(14,20);
var colors=`rgb(${randNum(0,200)},${randNum(0,200)},${randNum(0,200)})`
var str=strState[randNum(0,strState.length)];
context.beginPath();
context.font="italic "+fontSize+"px" +" Arial";
context.fillStyle=colors;
context.textAlign="center";
context.textBaseline='middle';
context.fillText(str,15*(i+1),10);
//context.rotate(Math.PI/randNum(150,200))
}
for(var i=0;i<10;i++){
context.beginPath();
var colors=`rgb(${randNum(200,255)},${randNum(200,255)},${randNum(200,255)})`;
context.arc(randNum(0,100),randNum(0,30),randNum(2,4),0,2*Math.PI);
context.fillStyle=colors;
context.fill();
}
</script>
</html>
5DDFA4CB-58E1-47C3-B6B0-4FAA51DD7FC4.png
