实现效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
text-align: center;
width: 200px;
height: 200px;
}
#myCanvas {
border: 1px solid #ccc;
}
.Canvas {
text-align: center;
}
.btn {
margin-top: 10px;
width: 80px;
height: 30px;
border: 0;
border-radius: 5px;
background: rgb(84, 58, 183);
color: #fff;
}
#val {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="Canvas">
<canvas id="myCanvas" width="122" height="40"></canvas>
</div>
<input type="text" id="val">
<button class="btn">验证</button>
</div>
<script type="text/javascript">
// 获取随机字符串函数
function randomString(len) {
//如果没有传递参数 默认是 5
len = len || 5;
//从这里随机 抽取
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabacdefg1234567890";
//获取字符串长度
let maxPos = chars.length;
//存储生成汉的验证码字符串
let val = '';
//循环
for (let i = 0; i < len; i++) {
// charsAt 返回字符串中的 某个位置 的字符 传递的参数是 字符串的 位置 数字
// Math.random()获取一个 0~1 的数字 包括小数
val += chars.charAt(Math.random() * maxPos);
}
return val;
}
// console.log(randomString());
//获取随机颜色函数
function randomColor() {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
return "rgb(" + r + ", " + b + "," + r + ")";
}
// console.log(randomColor());
//获取 canvas 元素
const c = document.querySelector('#myCanvas');
//获取随机字符
let letifcation = randomString();
//canvas 验证 填充函数
function cav() {
//随机验证码字符串
letifcation = randomString();
//获取canvas 的宽度
const cxtwith = c.offsetWidth;
//获取canvas 的高度
const cxtheight = c.offsetHeight;
//创建画布
const ctx = c.getContext('2d');
//重置画布
ctx.clearRect(0, 0, cxtwith, cxtheight);
//字体颜色;
ctx.fillStyle = '#FF0000';
//字体的大小 和 字体类型
ctx.font = '35px Arial';
//填充
ctx.fillText(letifcation, 10, 25);
//验证码上显示的线条
for (let i = 0; i <= 5; i++) {
ctx.strokeStyle = randomColor()
//起始点
ctx.beginPath();
//移动到指定位置 不创建 路径
ctx.moveTo(Math.random() * cxtwith, Math.random() * cxtheight);
//创建一个新的起点
ctx.lineTo(Math.random() * cxtwith, Math.random() * cxtheight);
//填充
ctx.stroke();
}
//验证码上显示的小点
for (let i = 0; i <= 30; i++) {
ctx.strokeStyle = randomColor();
//起始点
ctx.beginPath();
let x = Math.random() * cxtwith;
let y = Math.random() * cxtheight;
//移动
ctx.moveTo(x, y);
//创建一个新的点
ctx.lineTo(x + 1, y + 1);
//填充
ctx.stroke();
}
}
cav();
//点击 验证码 容器触发
c.addEventListener('click', () => {
// 重新调用
cav();
})
//获取按钮
let btn = document.querySelector('.btn');
//获取文本框
let val = document.querySelector('#val');
//点击按钮 触发
btn.addEventListener('click', () => {
if (val.value != letifcation) {
alert('验证码不正确！');
return
}
alert('验证码正确！');
})
</script>
</body>
</html>
