canvas 随机数字字母验证码

<canvas id="canvasCode" data-value="code" width="220" height="36"></canvas>

　　

// 提供一个 canvas 入口。内部设置都单独提出来
    var canvasWrap = document.getElementById("canvasCode");
    rmdCode(canvasWrap);

　　

//  canvas 作为画布，可以实现很多特殊图形的设定
//  随机字符；随机线条；随机点；
function rmdCode(canvas){
    var ctwidth = canvas.width;
    var ctheight = canvas.height;
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,ctwidth,ctheight);  // 清空画布。每次刷新，都能是不同的随机验证码

    // 源数据；去除不容易识别的 0,o,I,l,u,U
    var characters="abcdefghjkmnpqrstvwxyzABCDEFGHJKMNPQRSTVWXYZ123456789";       
    // split("")转化成字符串数组
    characters = characters.split("");
    // 随机产生数字，线条，点点
    canvasFont(ctx,characters,5,ctwidth,ctheight);
    canvasLine(ctx,6,ctwidth,ctheight);
    canvasPoint(ctx,20,ctwidth,ctheight);
}
// 循环fontLen 随机字符;给 #canvasCode 赋值
function canvasFont(canvasName,arr, fontLen,ctwidth,ctheight){
            
    var rdmCode = "";
    for( var i=0; i< fontLen; i++ ){
        var fontSize = ctheight *3 /4;
        canvasName.font = "bold " + fontSize + "px sans-serif";
        canvasName.fillStyle = rdmColor();
        var fontVal = rdmFont(arr);
        // 字符定位；fontX 一定要依次增加
        var fontX = (ctwidth/(fontLen +1)) *(i+0.5);
        var fontY = Math.random()*(ctheight*1/5)+(ctheight*7/10);
        canvasName.fillText(fontVal, fontX ,fontY );
        
        // 旋转 -10~10度。但是旋转会超出范围，故隐藏
        // var deg = (Math.random()*20 -10) *Math.PI / 180;
        // canvasName.rotate(-deg);
        rdmCode = rdmCode.concat(fontVal);
    }
    $("#canvasCode").val(rdmCode);  //  画布canvas 虽然画出来了字符，但是其 val() 依然为空，所以需要赋值！用来表单验证
}
function canvasLine( canvasName,lineLen,ctwidth,ctheight ){
    // 随机生成 lineLen 条数的干扰线
    for(var i =0; i< lineLen; i++){
        linePath(canvasName,ctwidth,ctheight);
    }       
}
function canvasPoint( canvasName, pointLen,ctwidth,ctheight ){
    for(var i=0; i<pointLen; i++){
        pointPath(canvasName,ctwidth,ctheight);
    }
}


function linePath(canvasName,ctwidth,ctheight){
    // 新建一条 path
    canvasName.beginPath();
    canvasName.lineWidth = 1;  
    canvasName.globalAlpha = 0.4;  // 增加透明度，减轻对文字的干扰
    canvasName.strokeStyle = rdmColor();
    canvasName.moveTo((Math.floor(Math.random()*100) / 100)*ctwidth,(Math.floor(Math.random()*100) / 100)*ctheight);
    canvasName.lineTo((Math.floor(Math.random()*100) / 100)*ctwidth,(Math.floor(Math.random()*100) / 100)*ctheight);
    canvasName.stroke();
}
function pointPath(canvasName,ctwidth,ctheight){
    canvasName.strokeStyle = rdmColor();
    canvasName.lineWidth = 1;
    canvasName.globalAlpha = 0.9;  // 增加透明度，减轻对文字的干扰
    canvasName.beginPath();
    var x = Math.random() * ctwidth;
    var y = Math.random() * ctheight;
    canvasName.moveTo(x,y);
    canvasName.lineTo(x+1,y+1);
    canvasName.stroke();
}


      
// 随机出单个 font 
function rdmFont(arr){
    if(arr[getRndInteger(1,arr.length)] == "undefined"){
        return "1";
    } else {
        return arr[getRndInteger(1,arr.length)];
    }
}
// 随机 rgb 颜色
function rdmColor(){
    return "rgb("+getRndInteger(1,200)+","+getRndInteger(1,200)+","+getRndInteger(1,200)+")";
}
// 随机循环0-90 度角度
function rdmAngle(){
    return (getRndInteger(1,90))*(Math.PI/180);
}

// 产生随机 min - max 之间的随机数
function getRndInteger( min, max ){
    return Math.floor(Math.random()*( max- min )) + min;
}