用 canvas 和 js 生成验证码

验证码的生成

---

茶前饭后之余，我们来说一下如何用 H5 的 canvas 和 JavaScript 来生成一个完美的验证码。

 

生成验证码的主要步骤分为三步：生成干扰点、生成干扰线、生成字符，下面开始我的表演。

 

当然我们在进行主要步骤之前我们得需要一个 canvas 对象

//html
点击图片重新生成验证码
<p>
    <input type="text" class="topAlign" id="verify" name="verify" required>
    <canvas width="100" height="40" id="verifyCanvas"></canvas>
    <img id="code_img">
</p>
<button id="submit" type="submit">提交</button>

接下来我们在 script 标签获取到这个 canvas 对象

//script
var canvas = document.getElementById("verifyCanvas"); //获取HTML端画布
var ctx = canvas.getContext("2d"); //获取画布2D上下文

• 生成干扰点

那么点是如何绘制出的呢？其实点就是长宽很小的矩形，因为过小的原因，在我们看来就好像一个点。所以在绘制点的时候我们只需要绘制你固定个数的点就行。

for(let i=0; i < 200;i++){                     //循环绘制 700 个点
    let randx = Math.random()*canvas.width      //生成随机生成点的横坐标
    let randy = Math.random()*canvas.height     //生成随机生成点的纵坐标
    ctx.fillStyle = 'rgb(164, 13, 253)'         //生成的点的填充颜色 
    ctx.fillRect(randx,randy,1,1)               //绘制点
}

 

• 生成干扰线

干扰线是就是在画布上在随机的位置上生成随机长度的线，就是这么简单。

for(let i =0; i< 3; i++){   //绘制3条线
    ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() *         canvas.height));    //绘制线的初始位置
    ctx.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));    //绘制线的末位置
    ctx.lineWidth = 0.5; //设置线的宽度
    ctx.strokeStyle = 'black';  //设置线的颜色
    ctx.stroke();   //绘制
}

 

• 生成字符

生成字符就是把 26 个字母的大小写和数组存到一个数组中，绘制字符的时候随机到数组中取出固定个数的字符然后绘制就行了。

let nums = ["2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K','L', 'M', 'N', 'P', 'Q', 'R','S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',  'm','n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
'y', 'z']
//常识告诉我们要去掉 0、O、1、l 这四个字符，因为不好辨别
let vertify = []    //保存验证码
for(let i =0; i<4; i++){    //生成四个字符
        vertify.push(nums[Math.floor(Math.random()*nums.length)])   //随机获取四个字符并保存
      }
      ctx.font = "25px Arial";  //设置绘制的字体和大小
      ctx.fillText(vertify.toString(),10,25)    //在指定地方绘制字符
} 

 

• 实现刷新功能

这个功能比较简单，只需要在绘制验证码封装的函数执行之前清除掉原来画板上的验证码就可以实现刷新了。