CSS3 Canvas implements a random number verification code with interfering lines

Source: Internet
Author: User
Tags rand

The task of

Work is to do a verification code with interference items, the first thought is the use of H5 canvas to achieve.
would like to copy a piece of code directly online, but many do not meet the requirements, simply write their own, the code is as follows.

<canvas class= "codeimg" id= "codeimg" style= "width:120px;height:36px" > Your Browser does not support the canvas
Element.
    </canvas> <script type= "Text/javascript" > var code = "";

        $ (). Ready (function () {//assigns the return value to code code = Createcode ();
        Click the canvas image to replace the verification code $ ("#codeimg"). Click (function () {createcode ();

        }); /* Random character function */function rand () {//Remove i,i,l,o,o and other easily confusing letters var str= "ABCDEFGHJKMNPQRSTUVWXYZABCDEFGHJK
            LMNPQRSTUVWXYZ 0123456789 ";
            Separates a string into an array of Var arr=str.split ("");
            Random characters between [0,56] var rannum=math.floor (Math.random () *57);
            var captcha=arr[rannum];
        return captcha;
                }/* Random interference line function */function drawline (canvas, context) {//If Beginpath is omitted, the number of lines of interference is accumulated per click of CAPTCHA
                Context.beginpath (); The start and end point are randomly context.move within the canvas's wide heightTo (Math.floor (Math.random () * canvas.width), Math.floor (Math.random () * canvas.height));  
                Context.lineto (Math.floor (Math.random () * canvas.width), Math.floor (Math.random () * canvas.height));  
                Context.linewidth = 1;        
                Context.strokestyle = ' #275DB3 ';  
        Context.stroke (); 
            }/* Generate Verification Code */function Createcode () {////Generate code first to clear it to prevent overlay code = "";
            var canvas = document.getElementById ("codeimg");

            var context = Canvas.getcontext ("2d");
            Context.strokestyle = "#FFF"; 

            Context.strokerect (0, 0, canvas.width, canvas.height);  
            Generate the interference line, the amount is arbitrary for (var i = 0; i < i++) {DrawLine (canvas, context); }//Loop generates 5-bit verification code for (var k = 0; k < 5; k++) {context.font= ' 76px Arial '
                ;
    Save the initial state context.save ();            Obtain a random number of 1 to 1 var RA = 1-math.random () * * *;
                Get random tilt angle var angle = RA/8;
                var rannum = rand ();
                Spin-generated random character context.rotate (angle);
                Fill in the random number text generated by rand () into the canvas, and note the x-coordinate context.filltext (rannum,20+45*k,100);
                Restore the initial state so that the next cycle context.restore ();
            Code + = Rannum;
        }//Returns the generated verification code string return code; }} </script>

Where the code variable is used to verify that the user input value is consistent with the verification code, and as a condition for login verification, it is simply not posted.
finally look at the effect diagram:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.