废话不多说，先看图
这种图形验证码很高效简洁，使用爬虫是有较大难度的爬取网站信息的。
而且这种图形验证码的应用场景非常广，可用在登录注册等等需要上传信息的地方。
现在直接上代码
var str='';
GetCode();
function GetCode() {
str='';
var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
'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', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
];//验证码字符串
var CodeCanvas;
var CodeCanvasDocument;
CodeCanvas=document.getElementById('mycanvas');//获取画布元素
CodeCanvasDocument=CodeCanvas.getContext("2d");//创建context对象
CodeCanvasDocument.fillStyle = "cornflowerblue"; //画布填充色
CodeCanvasDocument.fillRect(0,0,CodeCanvas.width,CodeCanvas.height);//清空画布，重设大小即清空画布
CodeCanvasDocument.fillStyle="white";
CodeCanvasDocument.font="25px Arial";//设置字体
var rand = new Array();
var x = new Array();
var y = new Array();
var num;
for (var i = 0;i<4;i++){
rand.push(rand[i]);//向数组里面添加新的元素
change();
function change() {
num = Math.floor(Math.random() * 100);//创建随机数值，随机指向验证码字符串
if (num>61){/*因为验证码字符串里面只有62个字符，这个随机数很有可能超过62，这就要重新更新生成*/
change();/*调用自身*/
}
}
rand[i]=nums[num];//取得随机数指向的验证码字符串
str+=rand[i];
x[i] = i * 20 + 20;//设置写在画布上的随机字符的字符间隔
y[i] = Math.random() * 20 +50;//设置写在画布上的随机字符的随机高度
rand[i]=rand[i].toUpperCase();//转大写
CodeCanvasDocument.fillText(rand[i], x[i], y[i]);//将字符串写入画板
}
//转大写
str=str.toUpperCase();
//md5加密
str=hex_md5(str);
//随机画五条线
for(j = 0;j <= 4;j++){
Drawline(CodeCanvas, CodeCanvasDocument);
}
//随机画25个点
for(j=0;j<=25;j++)
{
drawDot(CodeCanvas,CodeCanvasDocument);
}
Image(CodeCanvas);
}
//划线函数
function Drawline (canvas, context) {
context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
context.lineWidth = 2; //线宽
context.strokeStyle = 'rgba(50,50,50,0.3)'; //随机线描边属性
context.stroke(); //描边，即起点描到终点
}
// 随机点(其实就是画1px像素的线)
function drawDot (canvas, context) {
var px = Math.floor(Math.random() * canvas.width);
var py = Math.floor(Math.random() * canvas.height);
context.moveTo(px, py);
context.lineTo(px + 1, py + 1);
context.lineWidth = 3;
context.stroke();
}
function chang(CodeCanvasDocument,CodeCanvas){
str_=document.getElementById('cod').value;
str_=str_.toUpperCase();//转大写;
//加密
str_=hex_md5(str_);
if(str_!=str){
alert("验证码错误");
/* Image(CodeCanvas);*/
resetCode();
}
else{
alert("验证码正确");
}
}
function Image(CodeCanvas) {
document.getElementById('mycanvas').style.display="none";
var image = document.getElementById("code_img");
image.src = CodeCanvas.toDataURL("image/png");
}
document.getElementById('code_img').οnclick=function(){
resetCode();
};
document.getElementById('FB').οnclick=function (CodeCanvasDocument,CodeCanvas) {
chang(CodeCanvasDocument,CodeCanvas);
};
function resetCode () {
$('#mycanvas').remove();
$('#code_img').before('<canvas width="200" height="100" id="mycanvas"></canvas>')
verVal = GetCode();
}我们一步一步讲解
首先设置一个空的字符串，这个字符串的作用后面再讲解，然后调用验证码函数主体部分，先设置一个数组 nums，把10个字母和26个小写26个大写字母当做这个数组的值，然后就是最重要的部分了，我们验证码用的是html5标准中的canvas画图控件，具体请参考w3c和菜鸟教程，这里不再赘述。
我们先获取canvas画布元素，再通过
CodeCanvasDocument=CodeCanvas.getContext("2d");
这句话来创建元素，再设置字体，背景颜色，设置大小，这个fillstyle前两个值是画布起始坐标，后两个值是宽度与高度，
创建并设置好了画布以后，我们要做的就是随机生成验证码，
我们先常见三个数组，for循环里面的4是输出多少位验证码，我设置的是4位，大家可以进行更改，rang.push是先数组里面添加新的元素，这里由于JavaScript的弱类型可以忽略，然后执行验证码输出函数，我们先创造一个随机变量，math.random()的作用是输出一个0-1的伪随机数,我们将它乘100，就得到了一个小数点前面有两位数，小数点后面有若干数的随机数，然后通过math.floor（）来获得整数部分，这样就得到了一个随机的两位数，然后我们再判断这个数是否大于61，因为验证码数组里面只有62个数，而数组下标是从0开始，所以先进行判断是否大于61，如果大于，则重新执行这个验证码函数，直到小于61为止，当获得了一个小于61的随机数，就把这个数当做数组的下标进行取值，并将得到的值赋值给rand[i]，这里的i是循环变量，str再加等于这个rand[i]来获取循环完成后的字符串,然后就设置写在画布上的随机字符串的字符间隔，这里可以根据需要更改，然后就是写在画布上的字符的高度，这里设置一个随机值，当然这个随机值也就无所谓怎么写了，最后转大写，这样做的目的是用户输入验证码时可以不区分大小写，当然这一个转大写是不可以的，后面还要再写其他的转大写，然后就是通过函数filltext（）来写在画布上，其中第一个值是要写在画布上的值，第二个值是这个值在画布上显示的横坐标，第三个是纵坐标。
当所有随机变量都输出完成后，我们要做的是绘制直线和原点，我们先转大写，再进行md5加密，然后就是调用划线函数和画点函数，同样设置两个随机变量作为起始点和终止点的坐标，然后设置线宽和颜色，最后描边即可，画点就是画像素为1的线段，这里不再详述，然后几次划线函数或者画点函数画布上就有几条线和点，当全部进行完成后，调用图像，即把画布转换成图形并隐藏画布，先设置隐藏画布，再获取画布的id，通过toDataURL（"image/png"）的方式转换成图像，并赋值给image.src，这样就成功把图像显示出来。
然后就是验证，我们已经获取了验证码上的图形信息，再获取输入框信息，点击提交进行比对，成功则进行下一步，不成功则重新绘制图像.
这里绑定了几个函数，当点击图像时重新调用画布函数重新绘图，点击提交错误时进行绘图，最后有一个重要的步骤，当每次需要重新绘图时，必须先移除画布所有节点，再添加相应的元素重新绘图。即最后一段。
ok，大功告成,图像验证码就写到这里,后面肯定还有许多新功能，希望有兴趣的同学自行研究,有什么好的建议或者想法，在下面留言告诉我或者加我qq1841301607，我们一起讨论，接受批评和建议.
