js canvas實現(xiàn)驗證碼并獲取驗證碼功能

更新時間：2021年09月23日 11:46:02 作者：a_咸魚

這篇文章主要為大家詳細(xì)介紹了js canvas實現(xiàn)驗證碼并獲取驗證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js canvas制作驗證碼并獲取驗證碼的具體代碼，供大家參考，具體內(nèi)容如下

最近沒事寫了一些小插件，今天要說的是包裝一個驗證碼的js代碼，如下：

/**包裝**/
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);// 生成隨機(jī)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;
}

/**繪制驗證碼圖片**/
function xh_drawPic(canvasid) {
    var canvas = document.getElementById(canvasid);
    var width = canvas.width;
    var height = canvas.height;
    //獲取該canvas的2D繪圖環(huán)境 
    var ctx = canvas.getContext('2d');
    ctx.textBaseline = 'bottom';
    /**繪制背景色**/
    ctx.fillStyle = xh_randomColor(180, 240);
    //顏色若太深可能導(dǎo)致看不清
    ctx.fillRect(0, 0, width, height);
    /**繪制文字**/
    var str = 'ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy';
    var code = "";
    //生成四個驗證碼
    for (var i = 1; i <= 4; i++) {
        var txt = str[xh_randomNum(0, str.length)];
        code = code + txt;
        ctx.fillStyle = xh_randomColor(50, 160);
        //隨機(jī)生成字體顏色
        ctx.font = xh_randomNum(90, 110) + 'px SimHei';
        //隨機(jī)生成字體大小
        var x = 10 + i * 50;
        var y = xh_randomNum(100, 135);
        var deg = xh_randomNum(-30, 30);
        //修改坐標(biāo)原點和旋轉(zhuǎn)角度
        ctx.translate(x, y);
        ctx.rotate(deg * Math.PI / 180);
        ctx.fillText(txt, 0, 0);
        //恢復(fù)坐標(biāo)原點和旋轉(zhuǎn)角度
        ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x, -y);
    }

    /**繪制干擾線**/
    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();
    }
    /**繪制干擾點**/
    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;
}



/**生成一個隨機(jī)數(shù)**/
function xh_randomNum(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

/**生成一個隨機(jī)色**/
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 + ")";
}

/**生成一個隨機(jī)碼**/
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'];

    // 隨機(jī)產(chǎn)生
    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;
}

上面的就是我包裝過的驗證碼js，你們直接復(fù)制即可，就可以用，下面就是引用代碼：

<!--- 引用 --->
<span class="identify-code"></span>
<button class="xh-btn xh-btn-success" id="get_code">獲取驗證碼</button>

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

    $('#get_code').click(function(){
     // 這個是我寫的一個彈出信息的插件，不用理會，c.code就可以獲取驗證碼里面的信息
        $(this).xh_prompt('success', '當(dāng)前驗證碼為：'+c.code, 1000);
    });
</script>

效果圖如下：