Web前端-html 5—CANVAS随机验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机验证码</title>
    <style>
        #c1 {
            border: 1px solid #999;
            vertical-align: bottom;
        }

        input {
            width: 120px;
            height: 30px;
            vertical-align: bottom;
            padding: 0;
            border: 1px solid #999;
        }
    </style>
</head>
<body>
<!--<form action="http://www.baidu.com" id="f1">-->
    <input type="text" id="inp1"/>
    <canvas id="c1" width="120" height="30">您的浏览器不支持canvas</canvas>

    <br/>
    <button>提交</button>
<!--</form>-->
<script>
    var myinput = document.querySelector("input");
    var mybutton = document.querySelector("button");
    var mycanvas = document.querySelector("canvas");
    var ctx = mycanvas.getContext("2d");
    /*
    * 分析 :验证码
    * 1, 准备  随机数  随机色
    * 2,遮罩线(随机排布,颜色随机)
    * 3,遮罩点(随机排布  颜色随机)
    * 4,背景色随机
    * 5,绘制的文本(大小随机,内容随机,颜色随机 ,角度随机)
    *
    *辅助:
    *  1。input输入的内容要与canvas的内容校验
    *  2,点击canvas 重新绘制(刷新)
    * */


    var content = "";
    function draw() {
        content = "";
        //随机背景
        ctx.fillStyle = getRandomColor(170,250);
        ctx.fillRect(0,0,120,30);
        //遮罩线(随机排布,颜色随机)
        for(var i = 0;i<5 ;i++){
            ctx.beginPath();
            ctx.strokeStyle= getRandomColor(110,200);
            ctx.moveTo(ran(5,110),ran(5,25));
            ctx.lineTo(ran(5,110),ran(5,25));
            ctx.stroke()
        }
        // 遮罩点(随机排布  颜色随机)
        for(var i = 0;i<40 ;i++){
            ctx.beginPath();
            ctx.fillStyle = getRandomColor(100,170);
            // ctx.arc()
            ctx.fillRect(ran(0,115),ran(0,25),1.5,1.5);
        }
        // 绘制的文本(大小随机,内容随机,颜色随机 ,角度随机)
        ctx.textBaseline = "top";
        var str = "qwertyuioplmkjnhbgvfcdxszaQAZWSXEDCRFVTGBYHNUJMIKOLP1234567890";
        // var str = "qwertyuioplmkjnhbgvfcdxsza";

        for(var i = 0;i<4 ;i++){
            ctx.beginPath();
            ctx.fillStyle = getRandomColor(0,100);
            ctx.font =ran(15,40)+"px '宋体'";
            // ctx.textBaseline = "top";
            var text = str[ran(0,str.length-1)];
            content += text;
            // ctx.fillText(text,i*30,5);
            ctx.translate(i*30,0);
            var angle = Math.PI/180*ran(-20,20);
            ctx.rotate(angle);
            ctx.fillText(text,0,0);
            //还原回去
            ctx.rotate(-angle);
            ctx.translate(-i*30,0);
        }
        console.log(content);
    }
    draw();


    //点击按钮验证值
    mybutton.onclick = function () {
       // 不区分大写操作
       if( myinput.value.toLowerCase()===content.toLowerCase()){
           alert("正确")
       }else{
           alert("错误")
       //    从新刷新
           draw();
       }
    }

    //点击canvas 刷新
    mycanvas.onclick = function () {
      draw();
    }


    //定义一个随机值 有[min,max]
    function ran(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min)
    }

    // 定义随机颜色
    function getRandomColor(min,max) {
        var  R = ran(min, max);
        var  G = ran(min, max);
        var  B = ran(min, max);
        return "rgb("+R+","+G+","+B+")"
    }

    // console.log(getRandomColor(170, 220));

</script>


</body>
</html>

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值