js キャンバスは検証コードを実装し、検証コード機能を取得します

/**パッケージ**/
var xh_digital_code = 関数(オプション) {
    this.el = オプション.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() {
        クリックコード = xh_drawPic(canvas_id);
        self.code = クリックコード;
        戻る;
    });
    
    self.code = コード;
}

/**検証コードの画像を描画する**/
関数 xh_drawPic(canvasid) {
    var キャンバス = document.getElementById(canvasid);
    var 幅 = キャンバス.幅;
    var 高さ = キャンバスの高さ;
    //キャンバスの 2D 描画環境を取得します。var ctx = canvas.getContext('2d');
    ctx.textBaseline = '下';
    /**背景色を描画する**/
    ctx.fillStyle = xh_randomColor(180, 240);
    //色が暗すぎると鮮明でない場合があります ctx.fillRect(0, 0, width, height);
    /**テキストを描画する**/
    var str = 'ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy';
    var コード = "";
    // 4つの検証コードを生成します for (var i = 1; i <= 4; i++) {
        var txt = str[xh_randomNum(0, str.length)];
        コード = コード + 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, 0);
        //座標原点と回転角度を復元します ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x, -y);
    }

    /**干渉線を描く**/
    (var i = 0; i < 3; i++) の場合 {
        ctx.strokeStyle = xh_randomColor(40, 180);
        ctx.beginPath();
        ctx.moveTo(xh_randomNum(0, 幅 / 2), xh_randomNum(0, 高さ / 2));
        ctx.lineTo(xh_randomNum(0, 幅 / 2), xh_randomNum(0, 高さ));
        ctx.stroke();
    }
    /**干渉点を描画する**/
    (var i = 0; i < 50; i++) の場合 {
        ctx.fillStyle = xh_randomColor(255);
        ctx.beginPath();
        ctx.arc(xh_randomNum(0, 幅), xh_randomNum(0, 高さ), 1, 0, 2 * Math.PI);
        ctx.fill();
    }
    戻りコード;
}



/**乱数を生成する**/
関数 xh_randomNum(最小値, 最大値) {
    Math.floor(Math.random() * (max - min) + min) を返します。
}

/**ランダムな色を生成する**/
関数 xh_randomColor(最小値, 最大値) {
    var r = xh_randomNum(最小値, 最大値);
    var g = xh_randomNum(最小値, 最大値);
    var b = xh_randomNum(最小値, 最大値);
    "rgb(" + r + "," + g + "," + b + ")" を返します。
}

/**ランダムコードを生成する**/
関数 xh_randomWord(ランダムフラグ, 最小値, 最大値) {
    var str = "",
        範囲 = 最小、
        arr = ['0'、 '1'、 '2'、 '3'、 '5'、 '6'、 '7'、 '9'、 'a'、 'b' '、' e '、' f '、' g '' '' '' '' u '、' v '、' w '、' x '、' y '、' '、' '、' b '、' d '、' e '、' f '、' g '' '' '' '' '' '' '' z '];

    // ランダムに生成 if (randomFlag) {
        範囲 = Math.round(Math.random() * (max - min)) + min;
    }
    (var i = 0; i < 範囲; i++) {
        pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[位置];
    }
    str を返します。
}

<!--- 引用--->
<span class="識別コード"></span>
<button class="xh-btn xh-btn-success" id="get_code">認証コードを取得</button>

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

    $('#get_code').click(function(){
     // これは私が書いたポップアップ情報プラグインです。無視してください。c.code は検証コード内の情報を取得できます。$(this).xh_prompt('success', '現在の検証コードは: '+c.code, 1000);
    });
</スクリプト>