JavaScript随机验证码

Posted xiaozhou223

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript随机验证码相关的知识,希望对你有一定的参考价值。

利用canvas制作一个随机验证码:

  1、clearRectcontext.clearRect(x,y,width,height);清空给定矩形内的指定像素

  2、fillStyle:设置画笔的颜色

  3、rotate(deg):旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 )

  4、translate(): 方法重新映射画布上的位置  

  5、Math.random():获取0-1之间的一个随机数,不包含1

  技术图片

<!-- html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas随机验证码</title>
    </head>
    <body>
        <canvas id="canvas" width="100" height="40" style="border: 1px solid red;display: block;margin: 0 auto;"></canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.querySelector("#canvas");
        var blur = myCanvas.getContext("2d");
        // 当点击画布时创建一个新的路径
        // 验证码封装
        myCanvas.onclick = function() 
            // 实现点击画布创建一个新的验证码
            blur.clearRect(0,0,100,40);
            verify();
        
        verify();
        function verify() 
            // 绘制矩形框
            // blur.strokeRect(0,0,100,40);
            // 随机验证码
            var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "s", "t", "u",
                "v", "w", "x", "y", "z", "A", "B", "C", "D", "F", "G", "H", "I", "J", "K", "L", "S", "T", "U", "V", "W", "X", "Y",
                "Z"
            ];
            // 显示四位数的验证码
            for (var i = 0; i < 4; i++) 
                var x = 20 + 20 * i;
                var y = 20 + 10 * Math.random();
                // console.log(x,y);
                // 在数组中获取到随机的索引整数
                var index = Math.floor(Math.random() * arr.length);
                // 通过随机的索引获取到随机的元素
                var texts = arr[index];
                // 设置验证码的相关样式
                blur.font = "bold 20px 微软雅黑";
                blur.fillStyle = textColor();
                // 画布旋转显示
                // translate() 方法重新映射画布上的位置
                blur.translate(x, y);
                // 将画布旋转,旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 )
                var deg = 90 * Math.random() * Math.PI / 180;
                blur.rotate(deg); //
                blur.fillText(texts, 0, 0);
                // 将画布映射返回原来的位置
                blur.rotate(-deg);
                blur.translate(-x, -y);
            
            
            // 制作验证码的干扰线制作
            for(var i=0;i<6;i++)
                blur.beginPath();
                blur.moveTo(Math.random()*100,Math.random()*40);
                blur.lineTo(Math.random()*100,Math.random()*40);
                // 设置干扰线的颜色
                blur.strokeStyle=textColor();
                blur.stroke();
            
            // 制作验证码的干扰圆点
            for(var i=0;i<20;i++)
                blur.beginPath();
                var x=Math.random()*100;
                var y=Math.random()*100;
                blur.moveTo(x,y);
                blur.lineTo(x+1,y+1);
                // 设置干扰线的颜色
                blur.strokeStyle=textColor();
                blur.stroke();
            
        
        // 获取随机颜色封装
        function textColor()
            var red=Math.floor(Math.random()*256);
            var green=Math.floor(Math.random()*256);
            var blue=Math.floor(Math.random()*256);
            return "rgb("+red+","+green+","+blue+")";
        
    </script>
</html>

 

 

 

 

 

 

 

x 要清除的矩形左上角的 x 坐标
y 要清除的矩形左上角的 y 坐标
width 要清除的矩形的宽度,以像素计
height 要清除的矩形的高度,以像素计

以上是关于JavaScript随机验证码的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript随机验证码

Javascript随机验证码

javascript 随机验证码#js #math

javascript 随机验证码#js #math

javascript 随机验证码#js #math

javascript 随机验证码#js #math