canvas验证码

这是一个用canvas加js写的验证码，可以生成随机颜色的干扰线，你可以改变验证码的颜色，如果你想要将线改成圆点，欢迎修改~

效果图:

什么都不说了，先上效果图，有图才有真相。

html代码:

canvas必须要设置他的高宽。

html

• html

<canvas id="checkCode" width="70" height="35" onclick="clickChange()"></canvas>

js代码：

js

• js

window.onload = function(){
    clickChange();
}

var code ; //在全局定义验证码

function createCode(){
    code = "";
    var codeLength = 4;//验证码的长度
    var checkCode = document.getElementById('checkCode');
    var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        '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');  //所有候选组成验证码的字符，当然也可以用中文的
    for(var i = 0; i < codeLength; i++) { //循环操作
        var index = Math.floor(Math.random()*52); //取得随机数的索引（0~51）
        code += random[index]; //根据索引取得随机数加到code上
    }
    return code;
}

/*干扰线的随机x坐标值*/
function lineX(){
    var ranLineX=Math.floor(Math.random()*70);
    return ranLineX;
}

/*干扰线的随机y坐标值*/
function lineY(){
    var ranLineY=Math.floor(Math.random()*35);
    return ranLineY;
}

// 生成随机颜色
function rgb(){

  return  '#' +
    (function(color){
    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])
      && (color.length == 6) ?  color : arguments.callee(color);
  })('');
}

function clickChange(){
    var mycanvas=document.getElementById('checkCode');
    var cxt=mycanvas.getContext('2d');
    cxt.fillStyle='#cbc7c6';
    cxt.fillRect(0,0,70,35);

    /*生成干扰线20条*/
    for(var j=0;j<20;j++){
        cxt.strokeStyle=rgb();
        cxt.beginPath();    //若省略beginPath，则每点击一次验证码会累积干扰线的条数
        cxt.moveTo(lineX(),lineY());
        cxt.lineTo(lineX(),lineY());
        cxt.lineWidth=0.5;
        cxt.closePath();
        cxt.stroke();
    }

    cxt.fillStyle='#6271a9';
    cxt.font='bold 20px Arial';
    cxt.fillText(createCode(),5,25);   //把rand()生成的随机数文本填充到canvas中
}