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インストーラーバージョングラフィックチュートリアル

推薦する

CentOS 7.0 (mysql-5.7.21) で複数の MySQL インスタンスを起動する方法

設定手順Linux システム: CentOS-7.0 MySQL バージョン: 5.7.21 Lin...

MySQL データベース面接に必須の 3 つのログの紹介

目次1. redo ログ (MySQL ストレージ エンジン InnoDB のトランザクション ログ...

mysql 5.7.17 winx64.zip インストールと設定方法のグラフィックチュートリアル

はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...

MySQL データベース クエリ パフォーマンス最適化戦略

クエリを最適化するExplain ステートメントを使用してクエリ ステートメントを分析するExpla...

HTML の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)

1. 問題を発見する&copy; は HTML の著作権記号ですが、間違ったフォントを選択す...

MySQL テーブルスペースのリカバリに対する正しいアプローチについての簡単な説明

目次予備的注釈問題の再現データ削除の原則データの再利用どの操作がデータホールの原因になりますか?表領...

Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します

目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

ハイパーリンクに関するいくつかの質問

<br />ポテトチップスパーティーのこのエピソードに参加して、何人かの友達に会えてとて...

Vue命令の動作原理と実装方法

Vue の紹介現在のビッグフロントエンドの時代は、混乱と衝突の時代です。世界は多くの派閥に分かれてお...

Mac OS に MySQL 5.7.20 をインストールするための詳細なグラフィックとテキストの説明

Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...

開発者にとって必須の Docker コマンドの概要

目次Docker入門Docker環境のインストールDockerイメージの共通コマンド検索ミラー画像を...

MySQL マスタースレーブレプリケーションの実践の詳細説明 - GTID ベースのレプリケーション

GTIDベースのレプリケーション導入GTID ベースのレプリケーションは、MySQL 5.6 以降に...

IE8ブラウザはWebページ標準に完全互換となる

<br />海外メディアの報道によると、マイクロソフトはソフトウェアの相互運用性への取り...

MySQL の FIND_IN_SET() と IN の違いを簡単に分析します

以前、あるプロジェクトでMysql FIND_IN_SET関数を使用したことがありますが、非常に便利...

Vue2.0/3.0双方向データバインディングの実装原理の詳細説明

Vue2.0/3.0双方向データバインディングの実装原理双方向データバインディングとは、データの変更...