本文例項為大家分享了 canvas製作驗證碼並獲取驗證碼的具體程式碼，供大家參考，具體內容如下

最近沒事寫了一些小外掛，今天要說的是包裝一個驗證碼的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);// 生成隨機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繪圖環境 
    var ctx = canvas.getContext('2d');
    ctx.textBaseline = 'bottom';
    /**繪製背景色**/
    ctx.fillStyle = xh_randomColor(180,240);
    //顏色若太深可能導致看不清
    ctx.fillRect(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);
        //隨機生成字型顏色
        ctx.font = xh_randomNum(90,110) + 'px SimHei';
        //隨機生成字型大小
        var x = 10 + i * 50;
        var y = xh_randomNum(100,135);
        var deg = xh_randomNum(-30,30);
        //修改座標原點和旋轉角度
        ctx.translate(x,y);
        ctx.rotate(deg * Math.PI / 180);
        ctx.fillText(txt,0);
        //恢復座標原點和旋轉角度
        ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x,-y);
    }

    /**繪製干擾線**/
    for (var i = 0; i < 3; i++) {
        ctx.strokeStyle = xh_randomColorwww.cppcns.com
 
(40,180);
        ctx.beginPath();
        ctx.moveTo(xh_randomNum(0,width / 2),xh_randomNum(0,height / 2));
        ctx.lineTo(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),height),1,2 * Math.PI);
        ctx.fill();
    }
    return code;
}



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

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

/**生成一個隨機碼**/
function xh_randomWord(rando
 
mFlag,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'];

    // 隨機產生
    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，你們直接複製即可，就可以用，下面就是引用程式碼：

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

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

    $('#get_code').click(function(){
     // 這個是我寫的一個彈出資訊的外掛，不用理會，c.code就可以獲取驗證碼裡面的資訊
        $(this).xh_prompt('success','當前驗證碼為：'+c.code,1000);
    });
</script>

效果圖如下：

上面就是效果圖了

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。