这是css样式和html
<style>
* {
margin: 0;
padding: 0;
}
.small {
display: flex;
height: 30px;
width: 250px;
margin-top: 10px;
border: 1px solid skyblue;
box-sizing: border-box;
}
.small input {
width: 160px;
height: 100%;
line-height: 30px;
padding-left: 5px;
outline: none;
border: none;
}
.small button {
flex-grow: 1;
height: 100%;
line-height: 30px;
text-align: center;
border: none;
outline: none;
border-left: 1px solid rgb(135, 206, 235);
}
.small button:hover {
background-color: rgb(135, 206, 235);
}
</style>
<div style="width: 500px;margin: 20px auto;">
<canvas id="canvas"></canvas>
<button id="btn" onclick="shuaxin()">点击换一张</button>
<div class="small">
<input class="inp" type="text">
<button onclick="yanzheng()">验证码验证</button>
</div>
</div>
这里是js
var inp = document.querySelector(".inp");
var canvas = document.getElementById("canvas");//获取到canvas对象!
var context = canvas.getContext("2d");//获取到canvas的绘图环境!
canvas.width = 200;//设置canvas宽度
canvas.height = 40;//设置canvas高度
context.font = "bold 20px 微软雅黑";//设置字体
context.strokeRect(0, 0, 200, 40);//绘制一个矩形框
var aCode = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z', '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'];
getNewValidate(); //页面加载先调用
function shuaxin() {
getNewValidate();
};
// 生成验证码
function getNewValidate() {
context.clearRect(0, 0, 200, 40);//清除画布
getValidate(6);//生成一个六位数的验证码
drawPoint(100);//画100个干扰点
drawLine(8);//画8条干扰线
};
// 验证验证码
var before;
var lowerCase;
var upperCase;
function yanzheng() {
if (inp.value === before || inp.value === lowerCase || inp.value === upperCase) {
alert("验证成功");
inp.value="";
} else {
alert("验证失败");
inp.value="";
}
}
// 生成n位的验证码
function getValidate(n) {
var str = "";
for (var i = 0; i < n; i++) {
var x = 20 + i * 20;
var y = 20 + Math.random() * 10;
var index = Math.floor(Math.random() * aCode.length);//获取到随机的索引值
var txt = aCode[index];//获取到随机的内容
context.fillStyle = getColor();//设置字体颜色
context.translate(x, y);//字体移动
var deg = 90 * Math.random() * Math.PI / 180;
context.rotate(deg);//字体随机旋转度数
context.fillText(txt, 0, 0);//将文字写到canvas上面
context.rotate(-deg);
context.translate(-x, -y);
str += txt;
}
before = str;
lowerCase = str.toLowerCase();
upperCase = str.toUpperCase();
}
// 画X个干扰点
function drawPoint(X) {
for (var i = 0; i < X; i++) {
context.beginPath();
var x = Math.random() * 200;
var y = Math.random() * 40;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.strokeStyle = getColor();
context.stroke();//开始绘制
}
}
// 画m条干扰线
function drawLine(m) {
for (var i = 0; i < m; i++) {
context.beginPath(); //开始一个路径
context.moveTo(Math.random() * 200, Math.random() * 40);//设置起点坐标
context.lineTo(Math.random() * 200, Math.random() * 40);//设置终点坐标
context.strokeStyle = getColor();
context.stroke();//开始绘制
}
}
// 验证码随机生成颜色值
function rnd(max, min = 0) {
return Math.round(Math.random() * (max - min)) + min
}
function getColor() {
let str = '0123456789ABCDEF';
let color = ['#'];
for (let i = 0; i < 6; i++) {
color.push(str[rnd(str.length - 1)])
}
return color.join('')
}
效果图如下: