效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
margin-left: 15px;
border: 1px solid #000;
vertical-align: bottom;
}
input {
width: 120px;
height: 40px;
vertical-align: bottom;
border: 1px solid #000;
text-indent: 5px;
font-size:20px;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<canvas width="120" height="40"></canvas>
<input type="text" placeholder="验证" autofocus>
<button>提交</button>
<script>
var mcanvas = document.getElementsByTagName("canvas")[0];
var minput = document.getElementsByTagName("input")[0];
var btn = document.getElementsByTagName("button")[0];
var ctx = mcanvas.getContext("2d");
var content = "0123456789zxcvbnmasdfghjklqwertyuiop";
var str = "";
var str1 = "";
function reset() {
//画点
for (var i = 0; i < 25; i++) {
ctx.beginPath();
ctx.fillStyle = randomColor(120, 220);
ctx.arc(getRandom(2, 118), getRandom(2, 38), 1, 0, Math.PI * 2);
ctx.fill();
}
//画线
for (var i = 0; i < 3; i++) {
ctx.beginPath();
ctx.strokeStyle = randomColor(80, 150);
ctx.lineWidth = getRandom(1, 2);
ctx.moveTo(getRandom(5, 30), getRandom(5, 35));
ctx.lineTo(getRandom(85, 115), getRandom(5, 35));
ctx.stroke();
}
//文字
for (var i = 0; i < 4; i++) {
var text = content[getRandom(0, content.length - 1)];
str += text;
str1 += text.toUpperCase();
var dushu = getRandom(-30, 30);
var youzou = getRandom(0, 10);
ctx.fillStyle = randomColor(80, 150);
ctx.font = getRandom(12, 25) + "px '宋体'";
ctx.textBaseline = "top";
ctx.translate(youzou + i * 30, 0);
ctx.rotate(Math.PI / 180 * dushu);
ctx.fillText(text, 0, 0);
ctx.rotate(Math.PI / 180 * -dushu);
ctx.translate(-(i * 30 + youzou), 0);
}
}
reset();
//判断
btn.onclick = function () {
var mValue = minput.value;
if (mValue == str || mValue == str1) {
alert("验证通过!!");
ctx.clearRect(0, 0, 120, 40);
minput.value = "";
str = "";
str1 = "";
reset();
} else {
alert("从新来");
minput.value = "";
}
};
//数字取值范围
function getRandom(min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
};
function randomColor(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>
支持原创!!!!!!!!!!!