canvas验证码

最新推荐文章于 2024-03-06 17:49:45 发布

凌可语

最新推荐文章于 2024-03-06 17:49:45 发布

阅读量542

点赞数 1

分类专栏：个人知识管理

本文链接：https://blog.csdn.net/lingkeyu/article/details/80621604

版权

个人知识管理专栏收录该内容

15 篇文章 0 订阅

订阅专栏

关于canvas验证码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击图片生成验证码</title>
    <style>
        .box{
            position:absolute;
            left:50%;
            top:50%;
        }
    </style>
    <script>

        //随机生成图片和线条的颜色
        function randomRgbColor() { //随机生成RGB颜色
            var r = Math.floor(Math.random() * 256); //随机生成256以内r值
            var g = Math.floor(Math.random() * 256); //随机生成256以内g值
            var b = Math.floor(Math.random() * 256); //随机生成256以内b值
            return "rgb(" + r + "," + g + "," + b + ")"; //返回rgb(r,g,b)格式颜色
        }
        window.onload = function () {
                 draw();
            document.getElementById("changeImg").onclick=function(){
                draw();
            }
                document.getElementById("canvas").onclick=function(){           //点击图片刷新验证码
                draw();
            }
        }

        var code="";        //全局变量code声明

        function draw(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            canvas.width = 120;
            canvas.height = 40;
            context.strokeRect(0, 0, 120, 40);

// var code="";

            var aCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,1,2,3,4,5,6,7,8,9";
            var aLength = aCode.split(",").length;          // split 通过“ ，”分割
            for (var i = 0; i <= 3; i++) {
                var x = 20 + i * 20;
                var y = 20 + Math.random() * 10;
                var j = Math.floor(Math.random() * aLength);
                var deg = Math.random() * 90 * Math.PI / 180;//随机弧度
                var txt = aCode.split(",")[j];

                code += aCode.split(",")[j];            //将四个随机数组合在一起

                context.fillStyle = randomRgbColor();   //文字的绘制颜色类型为随机生成的颜色
                context.font = "bold 20px 微软雅黑";    //文字的字体类型
                //修改坐标原点和旋转角度
                context.translate(x, y);
                context.rotate(deg);                    //根据随机角度进行旋转
                context.fillText(txt, 0, 0);
                //恢复坐标原点和旋转角度
                context.rotate(-deg);
                context.translate(-x, -y);
            }


            //干扰线
            for (var i = 0; i < 8; i++) {
                context.strokeStyle = randomRgbColor();
                context.beginPath();
                context.moveTo(Math.random() * 120, Math.random() * 40);
                context.lineTo(Math.random() * 120, Math.random() * 40);
                context.stroke();
            }
            /**绘制干扰点**/
            for (var i = 0; i < 20; i++) {
                context.fillStyle = randomRgbColor();
                context.beginPath();
                context.arc(Math.random() * 120, Math.random() * 40, 1, 0, 2 * Math.PI);
                context.fill();
            }
//alert(code);
        }

            function checkCode(){

                var inputCode = document.getElementById("codenumber").value;

                if(inputCode.length<=0){

                    alert("请输入您的验证码");

                }else if(inputCode.toUpperCase() != code.toUpperCase()){
                    alert("抱歉！您的验证码输入不正确");
                    code="";
                    draw();
                }else{
                    alert("恭喜您！您的验证码输入成功");
                }
            }

// alert(txt);
    </script>
</head>

<body>
<div class="box">
    <canvas id="canvas"></canvas>
    <a href="javascript:;" id="changeImg">再换一张</a>

    <input type="text" value="" id="codenumber">
    <button class="btn"  onClick="checkCode()">确认</button>
</div>
</body>

</html>