Transfer: https://github.com/ace0109/verifyCode
Attempting to do a verification code, found on the Internet this is not bad:
gVerify.js:
! (function (window, Document) {
function GVerify (options) {// create a graphic verification code objects, the object receives as a parameter options
this.options = {// default options parameter values
id: "", // container Id
canvasId : "verifyCanvas", // canvas the ID
width: "100", // default canvas width
height: "30", // default canvas height
type: "blend", // default type pattern codes blend: alphanumeric type, number: pure numbers, letter: pure letter
code: ""
}
IF (Object.prototype.toString.call (Options) == "[Object Object]") {// type parameter passed is determined
for (var i in options) {// the passed parameter, modify the default parameter values
this.options [I] = Options [I];
}
} the else {
this.options.id = Options;
}
this.options.numArr = "0,1 , 8, 9. "split(",");
this.options.letterArr getAllLetter = ();
this._init();
this.refresh();
}
GVerify.prototype = {
/**版本号**/
version: '1.0.0',
/**初始化方法**/
_init: function() {
var con = document.getElementById(this.options.id);
var canvas = document.createElement("canvas");
this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
canvas.id = this.options.canvasId;
canvas.width = this.options.width;
canvas.height = this.options.height;
canvas.style.cursor = "pointer";
canvas.innerHTML = "您的浏览器版本不支持canvas";
con.appendChild(canvas);
var parent = this;
canvas.onclick = function(){
parent.refresh();
}
},
/**生成验证码**/
refresh: function() {
this.options.code = "";
var canvas = document.getElementById(this.options.canvasId);
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
}else{
return;
}
ctx.textBaseline = "middle";
ctx.fillStyle = randomColor(180, 240);
ctx.fillRect(0, 0, this.options.width, this.options.height);
if(this.options.type == "blend") { //判断验证码类型
var txtArr = this.options.numArr.concat(this.options.letterArr);
} else if(this.options.type == "number") {
var txtArr = this.options.numArr;
} else {
var txtArr = this.options.letterArr;
}
For (var. 1 = I; I <=. 4; I ++) {
var TXT = txtArr [randomNum (0, txtArr.length)];
this.options.code + = TXT;
ctx.font = randomNum (this.options. height / 2, this.options.height) + ' px SimHei'; // randomly generated font size
ctx.fillStyle = randomColor (50, 160) ; // randomly generated font color
ctx.shadowOffsetX = randomNum (-3, 3) ;
ctx.shadowOffsetY randomNum = (-3,. 3);
ctx.shadowBlur randomNum = (-3,. 3);
ctx.shadowColor = "RGBA (0, 0, 0, 0.3)";
var x = this.options.width / 5 * i;
var y = this.options.height / 2;
var deg = randomNum(-30, 30);
/ ** set the rotation angle and the coordinates origin ** /
ctx.translate (X, Y);
ctx.rotate (deg Math.PI * / 180 [);
ctx.fillText (TXT, 0, 0);
/ ** recovery rotation angle and the coordinate origin ** /
CTX .rotate (-deg Math.PI * / 180 [);
ctx.translate (the -X-, -Y);
}
/ ** draw line interference ** /
for (var I = 0; I <. 4; I ++) {
ctx.strokeStyle = randomcolor (40, 180 [);
ctx.beginPath ();
ctx.moveTo (randomNum (0, this.options.width), randomNum (0, this.options.height));
ctx.lineTo (randomNum (0, this.options.width), randomNum (0, this.options.height));
ctx.stroke ();
}
/ ** interference plotted point ** /
for (var I = 0; i <this.options.width / 4; i ++ ) {
= randomcolor ctx.fillStyle (0, 255);
ctx.beginPath ();
ctx.arc (randomNum (0, this.options.width), randomNum (0, this.options.height),. 1, 0, 2 * the Math .PI);
ctx.fill ();
}
},
/ verification codes ** ** /
validate: function(code){
var code = code.toLowerCase();
var v_code this.options.code.toLowerCase = ();
IF (code == v_code) {
return to true;
} {the else
the this .Refresh ();
return to false;
}
}
}
/ ** array to produce the letter ** /
function getAllLetter () {
var letterStr = "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, A, B, C, D, E, F, G, H, I, J , K, L, M, N, O, P, Q, R & lt, S, T, the U-, V, W is, X-, the Y, the Z ";
return letterStr.split (", ");
}
/ ** generate a random number**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**生成一个随机色**/
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
window.GVerify = GVerify;
})(window, document);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形验证码</title>
</head>
<body>
<div id="v_container" style="width: 200px;height: 50px;"></div>
<input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
</body>
<script src="./gVerify.js"></script>
<script>
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function(){
var res = verifyCode.validate(document.getElementById("code_input").value);
if(res){
alert("验证正确");
}else{
alert("验证码错误");
}
}
</script>
</html>
使用这个效果不错: