当前位置：网站首页>Verification code native JS canvas

Verification code native JS canvas

2022-06-25 19:33:00 【Good first】
Insert picture description here
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
    
            width: 400px;
            /* height: 100px;/ */
            /* border: 1px solid ; */
            margin: 100px auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        #inp {
    
            width: 170px;
            height: 30px;
        }

        canvas{
    
            border: 1px solid;
            border-radius: 10px;
            /* canvas  A special   You need to set the width and height   Write in line   This is its attribute   If you want to write here   It needs to be converted to a block element */
        }
    </style>
</head>

<body>
    <div class="box">
        <input id="inp" type="text" placeholder=" Please enter the verification code （ Case sensitive ）">
        <canvas id="can" width="120" height="50"></canvas>
        <button id="submit"> Submit </button>
    </div>

    <script>
        var can = document.getElementById('can');

        var arr = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890'
        var ctx = can.getContext('2d')
        //  Random output 
        function random(a, b) {
    
            return Math.floor(Math.random() * (b - a + 1)) + a;
        }

        can.onclick = function () {
    
            console.log(1);
            getCode()
        }

        var code = ''; //  Record random verification code 
        getCode()
        function getCode() {
    
            //  Clear the previous before each click 
            ctx.clearRect(0, 0, 120, 50);

            //  Random lines  6 Heel root 
            for (let i = 0; i < 6; i++) {
    
                //  Began to draw  
                ctx.beginPath();
                //  Random starting point 
                ctx.moveTo(random(0,120),random(0,50));
                //  A random destination 
                ctx.lineTo(random(0,120),random(0,50));
                //  Randomly generate fill colors 
                ctx.strokeStyle =`rgb(${
      random(0,255)},${
      random(0,255)},${
      random(0,255)}`;
                 //  Draw line 
                 ctx.stroke()
            }
            //  Random   A circle 
             for (let i = 0; i < 20; i++) {
    
                  //  Began to draw 
                   ctx.beginPath();

                   //  Random circle drawing  arc(x,y,r,start,end);  Draw a circle ( Radian unit )
                   ctx.arc(random(0,120),random(0,50), random(0,5),0,Math.PI * 2) ;
                   //  Color of random circle 
                   ctx.fillStyle = `rgb(${
      random(0,255)},${
      random(0,255)},${
      random(0,255)}`;
                   //  Packing circle 
                   ctx.fill()
                 
             }
             //  Randomly generated letters  4 individual 
             for (let i = 0; i < 4; i++) {
    
                  var index = Math.floor(Math.random() * arr.length)
                  var letter = arr.charAt(index);// arr[index] Take out the letters at random 
                  //  Record random letters 
                   code += letter

                   //  Random letter size 
                   ctx.font = random(30 , 50) + 'px  Regular script ';
                   //  Random color 
                   ctx.fillStyle = `rgb(${
      random(0,255)},${
      random(0,255)},${
      random(0,255)}`
                   //  The writing method of the normal display of letters I 
                // ctx.fillText(letter,15 + i * 25, Math.random() * 10 + 30 )
                    
                   //  The letters are shown obliquely 
                    var x = 15 + i * 25 ; //  Point of font 
                    var y = Math.random() * 10 + 30 ;
                    //  Move the canvas rotation center to this letter 
                    ctx.translate(x, y);
                    //  Rotate the canvas   Go around the letters ‘
                    var range = (Math.random() * 40 - 20) / 180 * Math.PI;
                    //  Rotate within this range of letters   Up 
                    ctx.rotate(range);
                    ctx.fillText(letter,0,0) //  fill 
                    //  Down 
                    ctx.rotate(-range);
                    ctx.translate(-x,-y)
             }
        }
      
        //  Submit validation 
        submit.onclick = function () {
    
            if (inp.value == code) {
    
                alert(' Verification passed ');
                // inp.value = ''
                getCode()
            }else{
    
                alert(' Verification code error, please re-enter ')
            }
        }


    </script>

</body>

</html>
原网站
版权声明
本文为[Good first]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202190519032535.html
当前位置：网站首页>Verification code native JS canvas

Verification code native JS canvas

边栏推荐

猜你喜欢

随机推荐
