転送：https://github.com/ace0109/verifyCode
確認コードを実行しようとすると、これは悪いことではありませんインターネット上のが見つかりました：
gVerify.js：
！（機能（ウィンドウ、ドキュメント）{
機能GVerify（オプション）{//グラフィック検証コードオブジェクトを作成し、オブジェクトがパラメータのオプションとして受け取る
値パラメータthis.options = {//デフォルトのオプション
ID：「」、//コンテナID
canvasId 「verifyCanvas」、// IDキャンバス
幅：「100」、//デフォルトキャンバス幅
高さ：「30」、//デフォルトキャンバス高
タイプ：「ブレンド」、//デフォルト型パターンコードブレンド：英数字タイプ、数：純粋な数字、文字：純粋な文字
コード： ""
}
IF（Object.prototype.toString.call（オプション）== "[オブジェクトのオブジェクト]"）{//タイプパラメータが渡さが決定される
（Varのiについてオプション）{//渡されたパラメータは、デフォルトパラメータ値の変更
this.optionsを[I] = [オプション] [I];
}
}他{
this.options.id =オプション;
}
this.options.numArr =「0,1 、8、9 "スプリット（"、"）;
this.options.letterArr = getAllLetter（）。
this._init（）;
this.refresh（）;
}
GVerify.prototype = {
/ **版本号** /
バージョン： '1.0.0'、
/ **初始化方法** /
_init：関数（）{
VARコン=のdocument.getElementById（this.options.id）。
VARキャンバス=のdocument.createElement（ "キャンバス"）;
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 =「ポインタ」。
canvas.innerHTML = "您的浏览器版本不支持キャンバス"。
VaRの親は、この=。
}そうであれば（this.options.type == "番号"）{
キャンバス。
parent.refresh（）;
}
}
/ **生成验证码** /
リフレッシュ：関数（）{
this.options.code = "";
VARキャンバス=のdocument.getElementById（this.options.canvasId）。
（canvas.getContext）なら、{
VAR CTX = canvas.getContext（ '2D'）;
}他{
返します。
}
ctx.textBaseline = "中";
ctx.fillStyle = randomColor（180、240）。
ctx.fillRect（0、0、this.options.width、this.options.height）。
（this.options.type == "ブレンド"）であれば{//判断验证码类型
VAR txtArr = this.options.numArr.concat（this.options.letterArr）。
VAR txtArr = this.options.numArr。
}他{
VAR txtArr = this.options。
}
ため（VAR I 1 =; 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'。//随机生成字体大小
ctx.fillStyle = randomColor（50、160）。//随机生成字体颜色
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 *私は、
VaRのY = this.options.height / 2。
VAR DEG = randomNum（-30、30）。
/ *設定された回転角度と座標原点** /
ctx.translate（X、Y）;
ctx.rotate（DEGにMath.PI * / 180）;
ctx.fillText（TXT、0、0）;
/ *回転を復元角度および原点** /座標
ctx.rotateを（-DEGにMath.PI * / 180）;
ctx.translate（-X-、-Y）;
I = 0（VARのために、 I <this.options.width / 4; I ++ ）{
}
/ **绘制干扰线** /
（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（）;
}
/ **绘制干扰点** /
ctx.fillStyle = randomColor（0、255）;
ctx.beginPath（）;
ctx.arc（randomNum（0、this.options.width）、randomNum（0、this.options.height）、1、0、2 *にMath.PI）。
ctx.fill（）;
}
}
/ **验证验证码** /
検証：機能（コード）{
VARコード= code.toLowerCase（）。
VAR v_code = this.options.code.toLowerCase（）。
（コード== v_code）{場合に
trueを返します。
} {他
this.refresh（）。
falseを返します。
}
}
}
/ **生成字母数组** /
機能getAllLetter（）{
VAR letterStr =「、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、S、T、U、V、W、X、Y、Z」。
リターンletterStr.split（ ""）;
}
VAR R = randomNum（最小、最大）。
VAR G = randomNum（最小、最大）。
/ **生成乱数** /
関数randomNum（MIN、MAX）{
リターンMath.floor（Math.random（）*（最大-最小）+分）。
}
/ **生成一个随机色** /
機能randomColor（MIN、MAX）{
= randomNum B VAR（最小、最大）。
リターン"RGB（" + R + "" + G + "" + B + "）"。
}
window.GVerify = GVerify。
}）（ウィンドウ、ドキュメント）。
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>
使用这个效果不错：
