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

Html for beginners || What is Html || Where to start | Watch the codoblog video of html

 Hey all ..!     Start your carrier with by learning new skill which name is HTML , If you are interested in the web designing then you must started watch the video of codoblog.    If you are very unknown about HTML language then start from the scratch with codoblog's efforts. Watch series of codoblog and feel free to comment your doubt.                                                        Click to Launch for new beginning ....
Post a Comment
Read more

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more

Digital calender

                     Design A Digital Calender Design a code for accesing and designing calender. #CODE                                                                     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calender UI</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lobster:wght@200;300;400;500;600;700;800;900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lobster', sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100v...
Post a Comment
Read more