js canvas implements verification code and obtains verification code function

This article example shares the specific code of js canvas to make and obtain verification codes for your reference. The specific content is as follows

I have written some small plug-ins recently. Today I will talk about the js code that packages a verification code, as follows:

/**Package**/
var xh_digital_code = function(option) {
    this.el = option.el;
    var self = this;
    var click_code = '';

    var canvas_id = "xh_canvas_" + xh_randomWord(false, 30); // Generate a random id
    $(self.el).html('<canvas class="xh_canvas" id="' + canvas_id + '"></canvas>');

    var code = xh_drawPic(canvas_id);

    $('body').on('click', self.el, function() {
        click_code = xh_drawPic(canvas_id);
        self.code = click_code;
        return;
    });
    
    self.code = code;
}

/**Draw the verification code image**/
function xh_drawPic(canvasid) {
    var canvas = document.getElementById(canvasid);
    var width = canvas.width;
    var height = canvas.height;
    //Get the 2D drawing environment of the canvas var ctx = canvas.getContext('2d');
    ctx.textBaseline = 'bottom';
    /**Draw the background color**/
    ctx.fillStyle = xh_randomColor(180, 240);
    //If the color is too dark, it may not be clear ctx.fillRect(0, 0, width, height);
    /**Draw text**/
    var str = 'ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy';
    var code = "";
    //Generate four verification codes for (var i = 1; i <= 4; i++) {
        var txt = str[xh_randomNum(0, str.length)];
        code = code + txt;
        ctx.fillStyle = xh_randomColor(50, 160);
        //Randomly generate font color ctx.font = xh_randomNum(90, 110) + 'px SimHei';
        // Randomly generate font size var x = 10 + i * 50;
        var y = xh_randomNum(100, 135);
        var deg = xh_randomNum(-30, 30);
        //Modify the coordinate origin and rotation angle ctx.translate(x, y);
        ctx.rotate(deg * Math.PI / 180);
        ctx.fillText(txt, 0, 0);
        //Restore the coordinate origin and rotation angle ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x, -y);
    }

    /**Draw interference line**/
    for (var i = 0; i < 3; i++) {
        ctx.strokeStyle = xh_randomColor(40, 180);
        ctx.beginPath();
        ctx.moveTo(xh_randomNum(0, width / 2), xh_randomNum(0, height / 2));
        ctx.lineTo(xh_randomNum(0, width / 2), xh_randomNum(0, height));
        ctx.stroke();
    }
    /**Draw interference points**/
    for (var i = 0; i < 50; i++) {
        ctx.fillStyle = xh_randomColor(255);
        ctx.beginPath();
        ctx.arc(xh_randomNum(0, width), xh_randomNum(0, height), 1, 0, 2 * Math.PI);
        ctx.fill();
    }
    return code;
}



/**Generate a random number**/
function xh_randomNum(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

/**Generate a random color**/
function xh_randomColor(min, max) {
    var r = xh_randomNum(min, max);
    var g = xh_randomNum(min, max);
    var b = xh_randomNum(min, max);
    return "rgb(" + r + "," + g + "," + b + ")";
}

/**Generate a random code**/
function xh_randomWord(randomFlag, min, max) {
    var str = "",
        range = min,
        arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

    // Randomly generate if (randomFlag) {
        range = Math.round(Math.random() * (max - min)) + min;
    }
    for (var i = 0; i < range; i++) {
        pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[pos];
    }
    return str;
}

The above is the verification code js I packaged. You can just copy it and use it. The following is the reference code:

<!--- Quote--->
<span class="identify-code"></span>
<button class="xh-btn xh-btn-success" id="get_code">Get verification code</button>

<script type="text/javascript">
  var c = new xh_digital_code({
        el: '.identify-code' // .class name#id name});

    $('#get_code').click(function(){
     // This is a pop-up information plug-in I wrote. Ignore it. c.code can get the information in the verification code. $(this).xh_prompt('success', 'The current verification code is: '+c.code, 1000);
    });
</script>

The effect diagram is as follows:

The above is the effect picture

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: