CSS3 Canvas实现一个带干扰线条的随机数验证码

原创

于 2017-05-24 10:17:01 发布 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #验证码 #css3

本文介绍了如何使用HTML5的Canvas和CSS3来制作一个带有干扰线条的随机数验证码。作者在尝试网上找到合适的代码未果后，决定自行编写。验证码的验证逻辑未在文中展示，主要关注点在于利用Canvas绘制验证码及其干扰元素，并展示了最终的视觉效果。

工作中接到的任务是做一个带干扰项的验证码，首先想到的是利用H5的canvas来实现。
本想直接网上copy一段代码，但很多都不符合需求，索性自己写了，代码如下。

<canvas class="codeimg" id="codeimg" style="width: 120px;height: 36px">
    Your browser does not support the canvas element.
</canvas>   

<script type="text/javascript">
    var code = "";
    $().ready(function() {
    
    
        //将函数返回值赋给code
        code = createCode();

        //点击canvas图片更换验证码
        $("#codeimg").click(function