canvas底纹随机验证码制作

最新推荐文章于 2024-12-25 15:49:11 发布

sinat_35656188

最新推荐文章于 2024-12-25 15:49:11 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

分类专栏：前端日常笔记文章标签： canvas js

本文链接：https://blog.youkuaiyun.com/sinat_35656188/article/details/80250473

前端日常笔记专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一个使用HTML和Canvas API生成验证码的示例代码。该示例通过JavaScript动态生成带有随机数字、干扰线和干扰点的验证码图片，并实现了验证码刷新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #mycanvas{
                border: 1px solid;
                margin-top: 10px;
                margin-left: 90px;
            }
        </style>
    </head>
    <body>
        <form method="get" onsubmit="return yanzheng()"> 验证码：
            <input type="text" name="num" id="yzm" />
            <input type="submit" value="提交"  onclick="return yanzheng()"/>
            <br />
        </form>

        <canvas id="mycanvas" onclick="shengchengyzm()"></canvas>

        <script type="text/javascript">
            var hb;
            window.onload=function(){
                var mycanvas=document.getElementById("mycanvas");
                mycanvas.width=100;
                mycanvas.height=40;
                hb=mycanvas.getContext("2d");
                hb.fillStyle=getcolor();
                hb.fillRect(0,0,100,40);
            }
            function shengchengyzm(){
                hb.beginPath();
                var ran=parseInt(Math.random()*10000)%900000+100000;
                hb.font="20px 微软雅黑";
                hb.fillStyle=getcolor();
                hb.fillText(ran,15,28);
                //干扰线
                for (var i = 0; i < 20; i++) {
                    hb.beginPath();
                    var w=parseInt(Math.random()*10000)%mycanvas.width;
                    var h=parseInt(Math.random()*10000)%mycanvas.height;
                    hb.moveTo(w,h);
                    w=parseInt(Math.random()*10000)%mycanvas.width;
                    h=parseInt(Math.random()*10000)%mycanvas.height;
                    hb.lineTo(w,h);
                    hb.strokeStyle=getcolor();
                    hb.stroke();
                }
                //干扰点
                for (var i = 0; i <100; i++) {
                    hb.beginPath();
                    var w=parseInt(Math.random()*10000)%mycanvas.width;
                    var h=parseInt(Math.random()*10000)%mycanvas.height;
                    hb.moveTo(w,h);
                    hb.lineTo(w+1,h+1);
                    hb.strokeStyle=getcolor();
                    hb.stroke();
                }
                //蒙版
                hb.beginPath();
                hb.fillStyle="rgba(255,255,0,0.4)";
                hb.fillRect(0,0,100,40);
            };
            function getcolor(){
                var r=parseInt(Math.random()*10000)%256;
                var g=parseInt(Math.random()*10000)%256;
                var b=parseInt(Math.random()*10000)%256;
                return "rgb("+r+","+g+","+b+")";
            }
            function yanzheng(){
                return false;
            }
        </script>
    </body>
</html>

二、效果图
这里写图片描述