用 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 < 20