Skip to main content

Random Captcha Generator

 How to generate random captcha || JAVASCRIPT techinc


Here, you will going to teach how to generate random captcha by javascript


#CODE:

<!DOCTYPE html>

    <html>

        <head>

            <title></title>

        </head>

        <body>

            <canvas width=150 height=70 style="border:1px solid black;"></canvas><br>

            <button style="width:150px;

            height:40px;

            color: red;

            -webkit-tap-highlight-color:rgba(0,0,0,0);" onclick="generateCaptcha()">Generate Captcha</button>

            <style type="text/css">

                body{

                    text-align:center;

                    background-color:#00FA9A;                            

                }

                canvas{

                    background:white;

                }

            </style>

            <script type="text/javascript">

let canvas = document.querySelector("canvas");

let ctxt = canvas.getContext("2d")

function generateCaptcha(){

let captcha = Math.floor(Math.random()*8999+1000);

captcha = captcha.toString();

ctxt.beginPath();

ctxt.clearRect(-150,-70,320,150)

let syms = [];

let hex = "12345";

for(let i=0;i<2100;i++){

        ctxt.fillStyle = "#"+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)];

        ctxt.fillRect(Math.floor(Math.random()*150),Math.floor(Math.random()*70),1,1);

}

ctxt.fillStyle = "black";

for(let i=0;i<4;i++){

    syms.push(document.createElement("canvas"));

    syms[i].width = 130;

    syms[i].height = 130;

    ctx = syms[i].getContext("2d");

    ctx.rotate(Math.floor(Math.random()*35-15) * Math.PI / 180)

    ctx.fillStyle = "#"+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)];

    let font = Math.floor(Math.random()*35+85);

    ctx.font = font+"px Arial";

    ctx.fillText(captcha[i],40,font-10);

//ctxt.drawImage(syms[i],30,30,15+((i*40)-font)/2+30,Math.floor(Math.random()*25+35));

    ctxt.drawImage(syms[i],20*i+25,15,30+Math.floor(Math.random()*15-5),30+Math.floor(Math.random()*15-5));

}}

generateCaptcha();

            </script>

        </body>

</html>

#OUTPUT:

                                







Labels:

Comments

Post a Comment

The Most Populer

The Bubble Perspective

  The Bubble Perspective By CodoBlog                           Here is the bubble perspective video by codoblog. By using the HTML-CSS-JavaScript           we developed a code. In this code you you will teach how to design the animation in the                  canvas like bubbles flowing. Try out this code and explore your knowledge.         CODE -                    <html> <head> <meta charset="utf-8"> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #000; } </style> <script type="text/javascript"> let c,ctx,w,h let frameTime=0,prevTime=null let redrawElapsed=0 let animationScale=2 let redrawDuration = 5 let newCircleDuration = 0 let dots=[] ...
Post a Comment
Read more

SlideShow

Slideshow Change image every 3 seconds: 1 / 5 World Map 2 / 5 PUBG Show 3 / 5 React Logo 4 / 5 Sidebar Icon 5 / 5 Android Logo
Post a Comment
Read more

Sidebar Icon | The Icon Interaction

 Sidebar icon with animation || Icon interaction HTML  Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you. #CODE :        <!DOCTYPE html> <html> <head> <title>Icon menu</title> <style type="text/css"> body{ height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; font-weight: bold; flex-direction: column; } p{ font-size: 2.5rem; text-transform: uppercase; } svg{ stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } svg path{ fill: none; stroke: black; stroke-width:2px; transition:stroke-dasharray 400ms,stroke-dashoffs...
Post a Comment
Read more