JS手写简易验证码

<!--给宿主元素设置宽高，否则采用默认宽高150*50-->
<div id="canvas" style="width:150px;height:50px;"></div>

 /*
 opt:{
      ele:【必填】宿主Dom的class（.className）或Id(#id)
      randomNum: 【可选】要随机出的字符数量
      randomChars: 【可选】要显示的验证码字符，优先级大于randomNum
      randomType: 【可选】参加随机的字符，0或其他：表示数字+字母，1：表示数字，2：表示字母
      randomAllChars: 【可选】自定义参加随机的字符，优先级大于randomType
      charsColor: 【可选】自定义随机的字符的颜色（CSS支持的颜色），是数组
      dotColor: 【可选】背景点的颜色（CSS支持的颜色），是数组
      charsStyle: 【可选】随机的字符的样式，fill:实心，stroke:空心，stroke:空心,fillStroke：实心+边框
      charsStrokeColor: 【可选】charsStyle为 fillStroke时，边框的颜色
      trigger:【可选】是否点击图片更新验证码
      bgUrl:【可选】背景图片
 }
 */
 function XyVerificationCode(opt) {
     var options = {
         ele: "", //宿主Dom的class（.className）或Id(#id)
         randomNum: 4, //要随机出的字符数量
         randomChars: [], //要显示的验证码字符，优先级大于randomNum
         randomType: "0", //参加随机的字符，0或其他：表示数字+字母，1：表示数字，2：表示字母
         randomAllChars: [], //自定义参加随机的字符，优先级大于randomType
         charsColor: [], //自定义随机的字符的颜色（CSS支持的颜色），可以是是数组也可是字符串
         dotColor: [], //背景点的颜色（CSS支持的颜色），是数组
         charsStyle: "fill", //随机的字符的样式，fill:实心，stroke:空心,fillStroke：实心+边框
         charsStrokeColor: "#000", //charsStyle为 fillStroke时，边框的颜色
         trigger: true, //是否点击图片更新验证码
         bgUrl: "" //背景图片
     };

     function assingObject(target, source) {
         for (var i in target) {
             target[i] = source[i] || target[i];
         }
     }
     if (Object.assign) {
         options = Object.assign(options, opt);
     } else {
         assingObject(options, opt);
     };

     this.options = options,
         this.resultArr = [],
         this.resultStr = "";
     //获取随机字符
     this.getRandomChar = function(num) {
             var numChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
             var letterChars = ['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 myChars = this.options.randomAllChars;
             if (myChars.length) {
                 letterChars = [];
                 numChars = [];
             } else if (this.options.randomType == "1") {
                 letterChars = [];
             } else if (this.options.randomType == "2") {
                 numChars = [];
             }

             var chars = [];
             chars = chars.concat(numChars).concat(letterChars).concat(myChars);

             var maxIndex = chars.length - 1;
             var randomArr = [],
                 randomIndex;
             for (var i = 0; i < num; i++) {
                 randomIndex = Math.ceil(Math.random() * maxIndex);
                 var c = chars[randomIndex].toUpperCase();
                 randomArr.push(c);
             }

             return randomArr;
         }
         //画背景+随机数
     this.drawIcode = function(elem, s_arr) {
             var d = document.querySelector(elem);
             var w = d.offsetWidth,
                 h = d.offsetHeight;
             if (!h||!w) {
                 w = 150, h = 50;
             }

             var len = s_arr.length;
             var per_w = w / len;
             var fontSize = h * 0.65;
             var x = 0,
                 y = h / 2;
             var restH = h - fontSize,
                 restW = per_w - fontSize;
             var randomYRange = ((restH - fontSize) / 2) * 0.3,
                 randomXRange = ((restW - fontSize) / 2) * 0.3;

             var canvasDom = document.createElement("canvas");
             if (this.options.trigger) {
                 var t = this;
                 canvasDom.onclick = function() {
                     t.draw.call(t);
                 }
             }
             var ctx = canvasDom.getContext('2d');
             canvasDom.id = "my-random-canvas";
             canvasDom.width = w + "";
             canvasDom.height = h + "";


             //画随机数
             var drawRandomChars = function(ctx) {
                     var r, g, b;
                     var cap = (per_w) / 2;
                     var rotateMaxValue = 30,
                         rotateValue;
                     var randomX, randomY
                     ctx.textAlign = "center";
                     ctx.textBaseline = "middle";
                     ctx.font = ctx.font.replace(/(\d+)/, fontSize + "");

                     var randomcharsColor = [];
                     if (this.options.charsColor instanceof Array) {
                         randomcharsColor = this.options.charsColor;
                     }
                     var randomcharsColorLen = randomcharsColor.length;
                     for (var i = 0; i < len; i++) {
                         ctx.save();
                         x += cap;
                         rotateValue = rotateMaxValue * Math.random();
                         rotateValue = Math.round(Math.random() * 1000) % 2 ? rotateValue : 0 - rotateValue;



                         randomX = Math.random() * randomXRange;
                         randomY = Math.random() * randomYRange;
                         randomX = Math.round(Math.random() * 1000) % 2 ? randomX : 0 - randomX;
                         randomY = Math.round(Math.random() * 1000) % 2 ? randomY : 0 - randomY;
                         ctx.translate(x + randomX, y + randomY);
                         ctx.rotate(rotateValue * Math.PI / 180);

                         if (randomcharsColorLen) {
                             ctx.fillStyle = randomcharsColor[i % randomcharsColorLen];
                             ctx.strokeStyle = randomcharsColor[i % randomcharsColorLen];
                         } else {
                             r = Math.round(Math.random() * 255);
                             g = Math.round(Math.random() * 255);
                             b = Math.round(Math.random() * 255);
                             ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
                             ctx.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
                         }
                         if (this.options.charsStyle == "stroke") {
                             ctx.strokeText(s_arr[i], 0, 0);
                         } else if (this.options.charsStyle == "fillstroke") {
                             ctx.fillText(s_arr[i], 0, 0);
                             ctx.strokeStyle = this.options.charsStrokeColor;
                             ctx.strokeText(s_arr[i], 0, 0);
                         } else {
                             ctx.fillText(s_arr[i], 0, 0);
                         }
                         x += cap;
                         ctx.restore();
                     }
                 }
                 //画背景
             var drawBg = function(ctx, w, h) {
                     ctx.save();
                     var numW = 60,
                         numH = 20,
                         perW = w / numW,
                         perH = h / numH;
                     randomR = (perW < perH ? perW : perH) * 1 / 2;
                     bgDotNum = 100;
                     var randomIndex, x, y, radius, startAngle, endAngle, anticlockwise;
                     var randomDotColor = [];
                     if (this.options.dotColor instanceof Array) {
                         randomDotColor = this.options.dotColor;
                     }
                     var randomDotColorLen = randomDotColor.length;
                     for (var i = 0; i < numW; i++) {
                         for (var j = 0; j < numH; j++) {
                             ctx.beginPath();
                             if (randomDotColorLen) {
                                 ctx.fillStyle = randomDotColor[(i * j + j) % randomDotColorLen];
                             } else {
                                 var r = Math.round(Math.random() * 255);
                                 var g = Math.round(Math.random() * 255);
                                 var b = Math.round(Math.random() * 255);
                                 ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
                             }

                             x = i * perW + perW / 2;
                             y = j * perH + perH / 2;
                             radius = randomR * Math.random();
                             startAngle = Math.PI / 180 * Math.random();
                             endAngle = Math.PI / 180 * Math.random();
                             anticlockwise = Math.random() > 0.5 ? true : false;
                             ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                             ctx.fill();
                         }

                     }
                     ctx.restore();
                     drawRandomChars.call(this, ctx);
                 }
                 //画背景（通过bgUrl传递）
             var drawBgImg = function(ctx, w, h) {
                 var t = this;
                 var url = this.options.bgUrl;
                 var imgDom = new Image();
                 imgDom.src = url;
                 // 判断是否有缓存
                 if (imgDom.complete) {
                     var dw = imgDom.width,
                         dh = imgDom.height;
                     ctx.drawImage(imgDom, 0, 0, dw, dh, 0, 0, w, h);
                     drawRandomChars.call(this, ctx);
                 } else {
                     // 加载完成执行
                     imgDom.onload = function() {
                         var dw = this.width,
                             dh = this.height;
                         ctx.drawImage(imgDom, 0, 0, dw, dh, 0, 0, w, h);
                         drawRandomChars.call(t, ctx);
                     }
                 }
             }


             if (this.options.bgUrl) {
                 drawBgImg.call(this, ctx, w, h)
             } else {
                 drawBg.call(this, ctx, w, h, per_w);
             }

             d.innerHTML = "";
             d.appendChild(canvasDom)
         }
         //init：获取随机数，画出完整的验证码
     this.draw = function() {
         if (this.options.randomChars.length) {
             this.resultArr = this.options.randomChars;
         } else {
             this.resultArr = this.getRandomChar(this.options.randomNum);
         }
         this.resultStr = this.resultArr.join(",");
         this.drawIcode(this.options.ele, this.resultArr);
         return this.resultArr;
     }
 }
 var v = new XyVerificationCode({
     ele: '#canvas'
 })
 var code = v.draw();
 console.log(code, v.resultArr, v.resultStr);

下班啦，思路明天补上