Javascript Canvas验证码

用Canvas画的验证码，效果图如下

1.验证码的JS代码，保存到一个名称是validatedCode.js的文件内，代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

(function(window,document){
   function ValidatedCode(options){
       this.options = {
           id:"", //容器的ID
           canvasId:"verifyCanvas",//CANVAS的ID
           width:100,
           height:30,
           type:"blend",
           background:"",
           code:"",
           interferingLine:true,
           interferingPoint:true
       }
        
       if(Object.prototype.toString.call(options)=="[object Object]") { //判断传入的参数类型
           //如果传入的是对象则修改默认值
           for(field in options) {
               this.options[field]=options[field];
           }
       } else {
           this.options.id = options;
       }
 
       this.options.numberArray = "1,2,3,4,5,6,7,8,9,0".split(",");
       this.options.letterArray = "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".split(",");
       this.init();
       this.refresh();
   }
 
   ValidatedCode.prototype = {
       varsion:"1.0.0", //版本号
       init:function(){
           var container = document.getElementById(this.options.id);
           var canvas = document.createElement("canvas");
           canvas.id = this.options.canvasId;
           canvas.width = this.options.width;
           canvas.height = this.options.height;
           canvas.style.cursor="pointer";
           canvas.innerHTML="您的浏览器不支持CANVAS";
           canvas.style.boxShadow="0 0 10px 2px rgba(0,0,0,.36)";
           container.appendChild(canvas);
           var parent = this;
           canvas.onclick=function(){
               parent.refresh();
           }
       },
       //生成验证码
       refresh:function(){
           this.options.code = "";
           var canvas = document.getElementById(this.options.canvasId);
           if(canvas.getContext) {
               var ctx = canvas.getContext("2d");
           } else {
               return;
           }
 
           ctx.textBaseline="middle";
           if(this.options.background!='') {
                ctx.fillStyle=this.options.background;
           } else {
                ctx.fillStyle=randomColor(180, 240);
           }
            
           ctx.fillRect(0, 0, this.options.width, this.options.height);
 
           var textArray = this.options.numberArray;
           if(this.options.type=="blend") {
               textArray.concat(this.options.letterArray);
           } else if(this.options.type=="letter") {
               textArray = this.options.letterArray;
           }
 
           for(var i=1;i<5;i++) {
                var code = textArray[randomNum(0, textArray.length)];
                this.options.code+=code;
                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 * i;
                var y = this.options.height / 2;
                var deg = randomNum(-30, 30);
                /**设置旋转角度和坐标原点**/
                ctx.translate(x, y);
                ctx.rotate(deg * Math.PI / 180);
                ctx.fillText(code, 0, 0);
                /**恢复旋转角度和坐标原点**/
                ctx.rotate(-deg * Math.PI / 180);
                ctx.translate(-x, -y);
           }
 
           if(this.options.interferingLine) {
                /**绘制干扰线**/
                for(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();
                }
           }
           
 
           if(this.options.interferingPoint) {
               /**绘制干扰点**/
                for(var i = 0; i < this.options.width/4; i++) {
                    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();
                }
           }
       },
       /**验证验证码**/
        validate: function(code){
            code = code.toLowerCase();
            var v_code = this.options.code.toLowerCase();
            if(code == v_code){
                return true;
            }else{
                this.refresh();
                return false;
            }
        }
   }
 
   /**生成一个随机数**/
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
     
    /**生成一个随机色**/
    function randomColor(min, max) {
        var r = randomNum(min, max);
        var g = randomNum(min, max);
        var b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
 
   window.ValidatedCode = ValidatedCode;
})(window,document);

2.HTML代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="validateCode.js"></script>
</head>
<body>
     
    <div id="validatedCode"></div>
    <div>
            <input type="text" id="code" style="width:180px;height:25px;border-radius: 5px;border:1px solid #ccc;" />
            <input type="button" value="验证" onclick="validate()" />
    </div>
    <script type="text/javascript">
        var validatedCode = new ValidatedCode({id:"validatedCode",width:120,type:"blend",interferingLine:false,interferingPoint:false,background:"#fff"});
        function validate(){
            var code = document.getElementById("code").value;
            if(validatedCode.validate(code)) {
                alert("正确");
            } else {
                alert("错误");
            }
        }
    </script>
</body>
</html>