canvas生成图片验证码
程序员文章站
2022-01-15 12:00:52
...
其实这个东西是很简单的东西了，我自己很久没有动过canvas了，所以就写着玩了下。
只放下简单的代码，逻辑基本上是那一套逻辑。
<!doctype html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<style>
body {
height: 100%;
width: 100%;
position: absolute;
display: table;
margin: 0;
background: rgba(41, 171, 226, 0.1)
}
.div {
display: table;
margin-top: 20px;
height: 30px;
}
.div div {
display: inline-block;
vertical-align: middle;
}
.div div>* {
height: 30px
}
</style>
</head>
<body>
<div class="div">
<div>
验证码： <input type="text" id="input">
</div>
<div>
<canvas id="testStock" width="80" height="30">
</canvas>
</div>
</div>
</body>
<script>
var VergifyGraph = (function (Main) {
Main.random = function (min, max) { return Math.floor(Math.random() * (max - min) + min) };
Main.store = 'abcdefghigklmnopqrstuvwxyz0123456789';
Main.prototype = {
validStr: '',
refresh: function () {
this.validStr = '';
this.ctx.clearRect(0, 0, 80, 30);
this.ctx.beginPath();
this.ctx.fillStyle = `rgba(${Main.random(240, 255)},${Main.random(240, 255)},${Main.random(240, 255)},0.5)`;
this.ctx.fillRect(0, 0, 80, 30);
this.fillValid();
this.fillPoint();
this.ctx.closePath();
},
fillValid: function () {
const x = this.bindDom.width / 6;
const y = this.bindDom.height / 2;
const ctx = this.ctx;
ctx.fillStyle = `rgba(${Main.random(0, 224)},${Main.random(0, 224)},${Main.random(0, 224)},1)`;
let text = '';
for (let i = 0; i < 4 && (text = Main.store[Main.random(0, Main.store.length)], this.validStr += text); i++) {
this.ctx.font = '20px SimHei';
const deg = Main.random(-15, 15) * Math.PI / 180;
ctx.translate(x * (i + 1), y);
ctx.rotate(deg);
ctx.fillText(text, 0, 0);
ctx.rotate(-deg);
ctx.translate(-x * (i + 1), -y);
}
},
initBind: function () {
const that = this;
this.bindDom.addEvent('click', function () {
that.refresh();
}, true)
},
fillPoint: function () {
const ctx = this.ctx;
let i = 0;
while (++i) {
ctx.fillStyle = `rgba(${Main.random(0, 224)},${Main.random(0, 224)},${Main.random(0, 224)},0.2)`;
ctx.beginPath();
ctx.arc(Main.random(0, this.bindDom.width), Main.random(0, this.bindDom.height), 1, 0, 2 * Math.PI);
ctx.fill();
if (i == 50) {
break;
}
}
}
};
return Main;
})(function Main(id = '') {
this.version = 'version ' + Main.random(1, 10);
this.bindDom = document.getElementById(id);
this.bindDom.addEvent = function () {
const arg = arguments;
const that = this;
if (that.addEventListener) {
that.addEventListener.apply(that, arg);
} else {
arg[0] = 'on' + arg[0];
that.attachEvent.apply(that, arg);
}
}
this.ctx = this.bindDom.getContext('2d');
this.ctx.textBaseline = 'middle';
this.initBind();
this.refresh();
this.constructor = VergifyGraph;
VergifyGraph.prototype = Main.prototype;
});
var test = new VergifyGraph('testStock');
document.getElementById('input').oninput = function (e) {
if (this.value == test.validStr) {
setTimeout(() => { alert('congratulation!') })
}
}
</script>
</html>
上一篇： oracle查询正规表达示
下一篇： canvas验证码