js canvas制作验证码并获取验证码

js 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, 0, width, height);
    /**绘制文字