canvas + js做(常见的登录验证码) + 详解

html结构很简单搭建看一下代码就懂了。
其中验证码部分采用HTML 5中新增的canvas元素来实现。
用canvas元素绘制必须与js结合一起使用。
提交表单的时候有一些简单的绑定事件。
js部分有非常详细的注释。

html部分

 <div class="wrapper">
        <div class="input-box">
            <input type="text" class="inp" id="_inp">
            <span class="icon" id="_icon"></span>
        </div>
        <p id="massege">请输入。。。</p>
        <div class="canvas-box">
            <canvas  id="canvas" width="270" height="80"></canvas>
            <input type="button" class="refresh" id="_refresh">
        </div>
        <button class="sub" id="_sub">submit</button>
    </div>

css部分

  <style>
        *{
            padding:0;
            margin:0;
            border:none;            
            outline: none;
        }
        .wrapper{
            width: 350px;
            margin: 50px auto;
            border: 1px solid #ccc;
            border-radius: 15px;
            padding: 20px;
            box-sizing: border-box;
        }
        .wrapper .input-box,
        .wrapper .canvas-box
        {
            position: relative;
        }
        .wrapper .input-box .inp{
            margin: 10px 0;
            border: 1px solid #ccc;
            width: 270px;
            padding:15px;
            box-sizing: border-box;
            border-radius: 5px;
        }
        .wrapper .input-box .icon{
            position: absolute;
            width:32px;
            height: 32px;
            background-size: 100% 100%;
            top: 50%;
            right: 0;
            margin-top: -16px;
            display: none;
        }
        .wrapper p{
            margin-top: 10px;
            font-size: 12px;
            color: red;
            padding-left: 10px;
            display: none;
        }
        .wrapper .canvas-box canvas{
            margin: 15px  0;
            background: url('images/bg.jpg');
            border-radius: 5px;
        }

        .wrapper .canvas-box .refresh{
            width: 32px;
            height: 32px;
            position: absolute;
            top:50%;
            margin-top: -16px;
            right: 0;
            background: url('images/update.png');
            background-size: cover;
            cursor: pointer;
        }
        .wrapper .sub{
            width: 80px;
            height: 35px;
            background-color: #62b900;
            border-radius: 5px;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }
    </style>

js部分

<script>
    // 定义一个存放数字与字母的数组
    var array = [0,1,2,3,4,5,6,7,8,9];
    var string ;// 画布里面的文字
    init();
    function init(){
        for(var i = 65; i < 122; i++)
        {
            if(i > 90 && i < 97)
            {
                continue;
            }
            else {
                // 将数字转为字母
                array.push( String.fromCharCode(i));
            }
        }
        console.log(array);
        // 创建画布
        createCanvas();
        // 事件的绑定
        bindEvent();
    }
    function createCanvas(){
        string = '';// 画布里的文字
        var len = array.length;
        for(var  i = 0;i < 6; i++)
        {
            var text = array[Math.floor(Math.random()*len)];
            string += text + '';
        }
        //获得canvas区域
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');// 产生一个上下文对象(画笔)，二维绘图
        context.beginPath();//调用beginPath()方法表示路径的开始
        context.clearRect(0,0,canvas.width,canvas.height);// 绘制前先清除
        context.moveTo(10 + Math.floor(Math.random()*30),Math.floor(Math.random()*80));// 将光标移动到新点(x,y)，作为起始点，但不绘制
        context.lineTo(Math.floor(250 + Math.random()*20),Math.floor(Math.random()*80));// 指定到目标坐标(x,y),且在两坐标之间画一条直线
        context.lineWidth = 15;//指定线条的宽度
        context.strokeStyle = "#ccc";// 指定线条的颜色
        context.stroke();// 使用lineWidth、lineCap、lineJoin、strokeStyle对所有子路径进行填充
        context.closePath();// 关闭路径
        context.save();// 保存当前绘制的状态

        // 将文字加入到canvas中
        context.beginPath();// 开始新的路径
        context.font = '46px Roboto Slab';// 设置文本字体
        context.fillStyle = '#ddd';// 
        context.textAlign = 'center';// 设置文字对齐方式
        var x = canvas.width / 2;// x表示绘制文字的起始位置
        context.setTransform(1,-0.1,0.2,1,0,12);// 设置文字旋转和倾斜的效果
        context.fillText(string,x,60 );// 绘制填充文字
        context.restore();

    }
    function bindEvent(){
        var sub = document.getElementById('_sub'); // 获取提交按钮
        var ipt = document.getElementById('_inp');
        var massege = document.getElementById('massege');
        var icon = document.getElementById('_icon');
        var refresh = document.getElementById('_refresh');
        sub.addEventListener('click',function(){
            if(ipt.value == '' || ipt.value == null || ipt.value == undefined)
            {
                massege.style.display = 'block';
                icon.style.display = "block";
                massege.innerHTML = "请输入内容";
                icon.style.backgroundImage = "url('images/false.png')";
            }
            else
             {
                if(ipt.value == string.toLocaleLowerCase())// 小写也可以
                {
                icon.style.display = "block";
                icon.style.backgroundImage = "url('images/true.png')";
                }
                else 
                 {
                massege.style.display = 'block';
                icon.style.display = "block";
                icon.style.backgroundImage = "url('images/false.png')";
                massege.innerHTML = '输入错误，请重新输入！';
                }           
            }
       
        });
        refresh.addEventListener('click',function(){
            createCanvas();// 更新画布（更新文字）
    });
    // input文本框获得焦点之后 提示信息自动清除
    ipt.addEventListener('focus',function(){
        massege.style.display = 'none';
        icon.style.display = "none";
    });
    }
</script>