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:
Comments
Post a Comment