canvas绘制验证码图片

html

<div class="col-md-3 col-sm-3 col-xs-12 msg-code-box imgCode" id="code-img">
    <canvas id="canvas" width="100" height="38"></canvas>
    <span id="changeImg" class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</div>

调用方法

document.getElementById("changeImg").onclick = function(e){
    e.preventDefault();
    imgCodeObj.drawPic();
}
imgCodeObj.drawPic();

js

var imgCodeObj={
    imgCodeStr:'',
    /**生成一个随机数**/
    randomNum(min,max){
        return Math.floor( Math.random()*(max-min)+min);
    },
    /**生成一个随机色**/
    randomColor(min,max){
        var r = this.randomNum(min,max);
        var g = this.randomNum(min,max);
        var b = this.randomNum(min,max);
        return "rgb("+r+","+g+","+b+")";
    },
    /**绘制验证码图片**/
    drawPic(){
        this.imgCodeStr = '';
        var canvas=document.getElementById("canvas");
        var width=canvas.width;
        var height=canvas.height;
        var ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';

        /**绘制背景色**/
        ctx.fillStyle = this.randomColor(180,240); //颜色若太深可能导致看不清
        ctx.fillRect(0,0,width,height);
        /**绘制文字**/
        var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
        for(var i=0; i<4; i++){
            var txt = str[this.randomNum(0,str.length)];
            ctx.fillStyle = this.randomColor(50,160);  //随机生成字体颜色
            ctx.font = this.randomNum(25,40)+'px SimHei'; //随机生成字体大小
            var x = 5+i*25;
            var y = this.randomNum(30,45);
            var deg = this.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);
            this.imgCodeStr+=txt;
        }
        /**绘制干扰线**/
        for(var i=0; i<8; i++){
            ctx.strokeStyle = this.randomColor(100,180);
            ctx.beginPath();
            ctx.moveTo( this.randomNum(0,width), this.randomNum(0,height) );
            ctx.lineTo( this.randomNum(0,width), this.randomNum(0,height) );
            ctx.stroke();
        }
        /**绘制干扰点**/
        for(var i=0; i<100; i++){
            ctx.fillStyle = this.randomColor(0,255);
            ctx.beginPath();
            ctx.arc(this.randomNum(0,width),this.randomNum(0,height), 1, 0, 2*Math.PI);
            ctx.fill();
        }
    }
}