[JavaScript知识库]前端Canvas生成随机数字图形验证码

Canvas生成数字图形验证码，只需一个js文件！！！

登录页面往往会有图形验证码，有时候后台会返回，有时候后台并没有做这个功能，为了方便就需要我们前端人员来做图形验证码。今天只需要一个js文件就可以实现这个功能！

首先，我们要先准备一个容器

<!-- 引入captcha.js capacha.js需要我们创建一个 -->
<script src="./captcha.js"></script>
<div id="captchaImage" style="width: 80px;height: 20px;"></div>
<input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>

稍微添加一些样式

#captchaImage {
   /* 给图形验证码加了一个渐变色的边框线 */
   border: 2px solid transparent;
   margin-bottom: 10px;
   overflow: hidden;
   border-image:linear-gradient(to right,#94C5B0,#66BDC0) 1 10
 }

然后创建一个chptcha.js文件

/**生成一个随机数**/
function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

let size = 4; //设置验证码长度
function Captcha(options) { //创建一个图形验证码对象，接收options对象为参数
  this.options = { //默认options参数值
    id: "", //容器Id
    canvasId: "verifyCanvas", //canvas的ID
    width: "50", //默认canvas宽度
    height: "30", //默认canvas高度
    code: "",
  }
  if (Object.prototype.toString.call(options) == "[object Object]") { //判断传入参数类型
    for (var i in options) { //根据传入的参数，修改默认参数值
      this.options[i] = options[i];
    }
  } else {
    this.options.id = options;
  }
  this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
  this._init();
  this.refresh();
}

Captcha.prototype = {
  /**初始化**/
  _init: function () {
    var con = document.getElementById(this.options.id);
    var canvas = document.createElement("canvas");
    this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
    this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
    canvas.id = this.options.canvasId;
    canvas.width = this.options.width;
    canvas.height = this.options.height;
    canvas.style.cursor = "pointer";
    canvas.innerHTML = "您的浏览器版本不支持canvas";
    con.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"; // 文本绘制时对齐的基线
    ctx.fillStyle = 'rgb(247,253,251)'; //背景色
    ctx.fillRect(0, 0, this.options.width, this.options.height); // 矩形填充
    var txtArr = "0,1,2,3,4,5,6,7,8,9".split(","); //数字数组
    for (var i = 1; i <= size; i++) {
      var txt = txtArr[randomNum(0, txtArr.length)];
      this.options.code += txt;
      ctx.font = '25px SimSun' // 字体大小和字体格式
      ctx.fillStyle = 'rgb(93,151,126)'; //字体颜色  
      var x = this.options.width / (size + 1) * i;
      var y = this.options.height / 2;
      ctx.translate(x, y);
      ctx.fillText(txt, -6, -3);
      ctx.translate(-x, -y);
    }
  },

  /**验证验证码**/
  validate: function (code) {
    var v_code = this.options.code;
    if (code == v_code) {
      return true;
    } else {
      this.refresh();
      return false;
    }
  }
}

前面我们在容器的html引入了captchat.js，接下来是使用，同样写容器的html中

<script>
  var captchaCode = new Captcha("captchaImage");
  document.getElementById("my_button").onclick = function(){
   var res = verifyCode.validate(document.getElementById("code_input").value);
   if(res){
    alert("验证正确");
   }else{
    alert("验证码错误");
   }
  }
</script>

效果图如下


这里加了验证和点击刷新验证码的功能！
这个仅供大家参考，如果想要实现字母类型的验证码或者是字母数字混合类型的验证码，需要在captcha.js修改相关参数即可。