https://yq.aliyun.com/articles/743257
今天又是宅在家中躲病毒的一天，虽然无所事事，还是差点打破自己立的Flag，每天Code一下。
今天用JS实现验证码认证。看效果
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas验证码</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
margin: 30px;
width: 345px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.inputBox {
position: relative;
}
.inputBox input {
display: inline-block;
width: 300px;
outline: none;
padding: 15px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.inputBox span {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
right: 0;
top: 10%;
background: url('./images/true.png');
background-size: 100%;
/* display: none; */
}
.error {
color: red;
margin-top: 10px;
font-size: 12px;
display: none;
}
.canvasBox {
position: relative;
margin-top: 15px;
/* border: 1px solid #000; */
}
.canvasBox .imgBox {
width: 300px;
height: 80px;
border: 1px solid #ccc;
border-radius: 5px;
}
.canvasBox .refresh {
position: absolute;
right: 0;
top: 50%;
display: inline-block;
width: 32px;
height: 32px;
background: url('./images/update.png');
background-size: 100%;
margin-top: -16px;
border: 0;
}
.submit {
padding: 10px 20px;
border: 0;
background-color: greenyellow;
color: #fff;
font-size: 18px;
margin-top: 15px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inputBox">
<input type="text" placeholder="请输入验证码">
<span></span>
</div>
<p class="error">1111</p>
<div class="canvasBox">
<div class="imgBox">
<canvas id="myCanvas" width="300" height="80"></canvas>
</div>
<input type="button" class="refresh">
</div>
<button class="submit" type="submit">submit</button>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
// 生成验证码 大小写英文字母及数字之间选取
// 填充验证码
// 校验验证码
var arr = [];
for (var i = 0; i < 10; i++) {
arr.push(i);
}
for (var j = 0; j < 26; j++) {
arr.push(String.fromCharCode(j + 65));//大写字母
arr.push(String.fromCharCode(j + 97));//小写字母
}
var canvasstr = '';
function createCanvas() {
for (var i = 0; i < 6; i++) {
var a = arr[Math.floor(Math.random() * arr.length)];
canvasstr += a + ' ';
}
var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');
var oImg = new Image();
oImg.src = './images/bg.jpg';
oImg.onload = function () {
var pattern = ctx.createPattern(oImg, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
ctx.textAlign = 'center';
ctx.fillStyle = '#ccc';
ctx.font = "46px roboto slab"
ctx.setTransform(1, -0.12, 0.3, 1, 0, 12);
ctx.fillText(canvasstr, myCanvas.width / 2, 60);
}
}
createCanvas();
function showResult() {
var input = $('.inputBox input').val();
var code=canvasstr.split(' ').join('');
if (input == code) {
alert('ok');
}
else {
alert('false');
}
}
$(function () {
$(".refresh").click(function(){
createCanvas();
});
$(".submit").click(function(){
showResult();
})
})
</script>
</body>
</html>来源：oschina
链接：https://my.oschina.net/u/4323284/blog/3201813