この記事の例では、検証コードを作成して取得するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL マスタースレーブレプリケーションの遅延の原因と解決策
>>: MySQL8インストーラーバージョングラフィックチュートリアル
私が書いた内容が理解できない場合は、インターネット上に理解できるチュートリアルがない可能性があります...
目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...
<TH> タグは、テーブル内のヘッダーのプロパティを設定するために使用されます。以下の...
1. 概要information_schema データベースは performance_schema...
目次1. ストアドプロシージャ1.1. 基本構文1.2 実行権限を指定してストアドプロシージャを作成...
1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...
フレーム構造タグ <frameset></frameset>フレームを使用す...
目次例1例2例3例4例1 <html> <ヘッド> <title>...
インデックス作成は大学図書館の書誌インデックスの構築に似ており、データ検索の効率を向上させ、データベ...
序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...
この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...
コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...
HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...
背景nginx-kafka-module は、Kafka を nginx に統合して、Web プロジ...
CSS を導入する方法には、インライン スタイル、内部スタイル シート、外部スタイル シートの 3 ...