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

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

Code for icon design | camera icon code | html-css code

 Camera ICON creation || Code for the camera icon  Here is the code for camera icon design..try with your efforts..! ICON #CODE : >>                <!DOCTYPE html> <html> <head> <title>Camera Icon Creation</title> <style type="text/css"> body{ margin:0; background-color: lightblue; } .outer{     width: 50%;     height: 100vh;     display: flex;     justify-content: center;     align-items: center;     margin: 0 auto; } .body{     background-color: white;     border-radius: 30%;     width: 11rem;     height: 11rem;     position: relative;     box-shadow: 1px 1px 6px 1px slategrey; } .red{     border-radius: 50%;     background-color: crimson;     width: 10px;     height: 10px;     position: absolute;     ...
Post a Comment
Read more