HTML5 canvas 画网页验证码(验证码一般不可能是一张图片)

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

鱻i

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

阅读量2.2k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/a1455990364/article/details/78701031

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如果验证码是一张图片,那么每一个验证码图片都要对应一个字符串的验证码,这样做是很麻烦的,所以一般的验证码都是利用canvas或者别的东西画出来的随机验证码,然后转图片.或者直接不转,那么验证码怎么画的呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid red;
            background-color: gainsboro;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!--利用js属性取消a标签默认点击样式-->
    <a href="javascript:void(0)" οnclick="DrawNumber()">画数字验证码</a>
    <a href="javascript:void(0)" οnclick="DrawLetter()">画字母验证码</a>
    <img src="demo.jpg" style="display: none">
    <button οnclick="document.getElementsByTagName('img')[0].style.display = 'inherit'">按钮</button>
    <!--画布-->
    <canvas id = "my_canvas" width="100" height="40">
        <!--浏览器不兼容提示-->
        你的浏览器不支持canvas,请使用谷歌/欧朋/360/QQ等浏览器最新版
    </canvas>


    <script>

        //画数字验证码
        function DrawNumber() {
            var canvas = document.getElementById("my_canvas");
            var draw = canvas.getContext("2d");
            //利用画布宽高重制属性 清除画布内容
            canvas.height = canvas.height;
            //随机字体样式
            var font = ["宋体","黑体","微软雅黑","草书"];
            //随机字体颜色
            var color = ["red","pink","black","gay","yellow","green","blue"];
            //获得5位随机数字验证码
            var num = (10000 + parseInt(Math.random()* 89999)) + "";
            //一个个字母画出来
            for( var i = 0; i < 5; i++){
                //该数字的字体属性 "是否加粗 大小 字体样式"
                draw.font = 30 + parseInt(Math.random() * 10) + "px "+font[parseInt(Math.random() * 4)];
                //填充样式 (这里取颜色)
                draw.fillStyle = color[parseInt(Math.random() * 7)];
                //把当前选中数字画在画布上(注意:是一个数字一个数字画)
                draw.fillText(num[i]+"",20 * i,30 + parseInt(Math.random() * 10));
            }
            //调用画干扰线
            drawLine(draw);
        }

        //画英文验证码
        function DrawLetter() {
            var canvas = document.getElementById("my_canvas");
            var draw = canvas.getContext("2d");//语境上下文为2d方式 (没有3d)
            canvas.height=canvas.height;
            var font = ["宋体", "黑体", "微软雅黑", "草书"];
            var color = ["red", "pink", "black", "gay", "yellow", "green", "blue"];
            for (var i = 0; i < 5; i++) {
                var num;
                //随机画出来的字母是大写还是小写
                if(parseInt(Math.random() * 10) % 2 == 0)
                    num = (parseInt(Math.random() * 26));
                else
                    num = 32 + parseInt(Math.random() * 26);
                draw.font = 30 + parseInt(Math.random() * 10) + "px " + font[parseInt(Math.random() * 4)];
                draw.fillStyle = color[parseInt(Math.random() * 7)];
                //String.fromCharCode : 根据ASCII码获取对应字母
                draw.fillText(String.fromCharCode(65 + num), 20 * i, 30 + parseInt(Math.random() * 10));
            }
            drawLine(draw);
        }

        //混合双打????

        //干扰线
        function drawLine(draw) {
            //干扰线固定5条
            for (var i = 0; i < 5; i++){
                draw.moveTo(0,parseInt(Math.random() * 42));
                draw.lineTo(70 + parseInt(Math.random() * 30),parseInt(Math.random() * 30));
                draw.stroke();
            }
        }
    </script>
</body>
</html>

这里有两个版本的画验证码的方式,一个是画数字验证码,一个是画26个英文字母大小写随机验证码.
可以直接复制到记事本然后保存为html文件在支持html5的浏览器中打开即可