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

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

この記事の例では、検証コードを作成して取得するためのjsキャンバスの具体的なコードを共有しています。具体的な内容は次のとおりです。

最近、いくつかの小さなプラグインを作成しました。今日は、検証コードをパッケージ化する次の 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 を返します。
}

上記は私がパッケージ化した検証コード js です。そのままコピーして使用できます。以下は参照コードです。

<!--- 引用--->
<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);
    });
</スクリプト>

効果図は以下のとおりです。

上記は効果画像です

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 検証コードを実装するためのネイティブ js+ca​​nvas
  • js+h5 キャンバスで画像検証コードを実現
  • js+ca​​nvas はグラフィック検証コードを描画します
  • JavaScriptはキャンバスを使用してランダムな検証コードを描画します
  • JS+HTML5 キャンバス描画検証コード例
  • JavaScript Canvasは検証コードを実装します
  • js+ca​​nvasで検証コード機能を実現
  • js+ca​​nvasはスライディングパズルの検証コードの機能を実現します
  • キャンバスと js を使用して検証コードを生成する方法
  • jsはクリックして確認コードを取得するカウントダウン効果を実現します

<<:  MySQL マスタースレーブレプリケーションの遅延の原因と解決策

>>:  MySQL8インストーラーバージョングラフィックチュートリアル

推薦する

macOS での MySQL 8.0.17 のインストールと簡単な設定チュートリアル

私が書いた内容が理解できない場合は、インターネット上に理解できるチュートリアルがない可能性があります...

js で 0ms 遅延タイマーを実装するいくつかの方法

目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...

HTML テーブル タグ チュートリアル (36): テーブル ヘッダーの背景色属性 BGCOLOR

<TH> タグは、テーブル内のヘッダーのプロパティを設定するために使用されます。以下の...

MySQL information_schema データベースの詳細な説明

1. 概要information_schema データベースは performance_schema...

MySQL でのストアド プロシージャと関数の作成の詳細な説明

目次1. ストアドプロシージャ1.1. 基本構文1.2 実行権限を指定してストアドプロシージャを作成...

MySQL 学習のまとめ: InnoDB ストレージ エンジンのアーキテクチャ設計の予備的な理解

1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...

XHTML: フレーム構造タグ

フレーム構造タグ <frameset></frameset>フレームを使用す...

JS 4つの楽しいハッカー背景効果コードを共有する

目次例1例2例3例4例1 <html> <ヘッド> <title>...

MySQLインデックスを正しく作成する方法

インデックス作成は大学図書館の書誌インデックスの構築に似ており、データ検索の効率を向上させ、データベ...

{{ }} で関数を直接使用する WeChat アプレットの例

序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...

ネイティブ JavaScript でシンプルな Gobang ゲームを実装する

この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...

Vueコンポーネントの基本のまとめ

コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...

HTML ハイパーリンク タグ_Powernode Java アカデミー

HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...

Kafka と Nginx の統合例

背景nginx-kafka-module は、Kafka を nginx に統合して、Web プロジ...

CSSファイルをインポートする3つの方法の詳細な説明

CSS を導入する方法には、インライン スタイル、内部スタイル シート、外部スタイル シートの 3 ...