この記事では、Vueログイン用画像認証コードの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。 レンダリング 1. 新しいVueコンポーネントcomponents/identify/identify.vueを作成します。<テンプレート> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'SIdentify', 小道具: { 識別コード: タイプ: 文字列、 デフォルト: '1234' }, フォントサイズ最小: { タイプ: 数値、 デフォルト: 28 }, フォントサイズ最大: { タイプ: 数値、 デフォルト: 40 }, 背景色最小: { タイプ: 数値、 デフォルト: 180 }, 背景色最大: { タイプ: 数値、 デフォルト: 240 }, 色最小: タイプ: 数値、 デフォルト: 50 }, 色最大値: { タイプ: 数値、 デフォルト: 160 }, ラインカラー最小: { タイプ: 数値、 デフォルト: 40 }, ラインカラー最大: { タイプ: 数値、 デフォルト: 180 }, ドットカラー最小: { タイプ: 数値、 デフォルト: 0 }, ドットカラーマックス: { タイプ: 数値、 デフォルト: 255 }, コンテンツ幅: { タイプ: 数値、 デフォルト: 112 }, コンテンツの高さ: { タイプ: 数値、 デフォルト: 40 } }, メソッド: { // 乱数を生成する randomNum (min, max) { Math.floor(Math.random() * (max - min) + min) を返します。 }, // ランダムな色を生成する randomColor (min, max) { var r = this.randomNum(最小値, 最大値) var g = this.randomNum(最小値, 最大値) var b = this.randomNum(最小値, 最大値) 'rgb(' + r + ',' + g + ',' + b + ')' を返します }, 描画画像() { var キャンバス = document.getElementById('s-canvas') var ctx = キャンバス.getContext('2d') ctx.textBaseline = '下' // 背景を描画する ctx.fillStyle = this.randomColor( this.backgroundColorMin、 this.backgroundColorMax ) ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) // テキストを描画する for (let i = 0; i < this.identifyCode.length; i++) { this.drawText(ctx, this.identifyCode[i], i) } this.drawLine(ctx) this.drawDot(ctx) }, 描画テキスト (ctx, txt, i) { ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax) ctx.フォント = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) var deg = this.randomNum(-30, 30) // 座標原点と回転角度を変更する ctx.translate(x, y) ctx.rotate(度 * Math.PI / 270) です。 ctx.fillText(txt, 0, 0) // 座標原点と回転角度を復元します ctx.rotate(-deg * Math.PI / 270) ctx.translate(-x, -y) }, 描画線 (ctx) { // 干渉線を描く for (let i = 0; i < 2; i++) { ctx.strokeStyle = this.randomColor( this.lineColorMin、 this.lineColorMax ) ctx.beginPath() ctx.moveTo() 関数は、 this.randomNum(0, this.contentWidth)、 this.randomNum(0, this.contentHeight) ) ctx.lineTo() 関数は、 this.randomNum(0, this.contentWidth)、 this.randomNum(0, this.contentHeight) ) ctx.ストローク() } }, 描画ドット (ctx) { // 干渉点を描画する for (let i = 0; i < 20; i++) { ctx.fillStyle = this.randomColor(0, 255) ctx.beginPath() ctx.arc( this.randomNum(0, this.contentWidth)、 this.randomNum(0, this.contentHeight)、 1、 0, 2 * 数学.PI ) ctx.fill() } } }, 時計: 識別コード(){ この.drawPic() } }, マウントされた(){ この.drawPic() } } </スクリプト> <style lang='less' スコープ> .s-キャンバス{ 高さ: 38px; } .s-canvas キャンバス{ 上マージン: 1px; 左マージン: 8px; } </スタイル> 第二に、現地での紹介が必要である<テンプレート> <span @click="refreshCode" style="cursor: ポインター;"> <s-identify :identifyCode="identifyCode" ></s-identify> </span> </テンプレート> <スクリプト> // 画像検証コードコンポーネントをインポートする import SIdentify from '@/components/identify' エクスポートデフォルト{ コンポーネント: { SIdentify }, データ() { 戻る { // 画像検証コード identifyCode: ''、 // 検証コードルールはコードを特定します: '3456789ABCDEFGHGKMNPQRSTUVWXY', } }, メソッド: { // 検証コードを切り替える refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }, // ランダムな検証コードを生成する makeCode(o, l) { (i = 0; i < l; i++ とします) { this.identifyCode += this.identifyCodes[ Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0) ] } }, } } </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLトランザクションの基本的な学習と経験の共有
>>: Linux でのルーティングと仮想マシン ネットワークの設定に関する詳細なグラフィック説明
新しい CSS 機能を使用する場合、その互換性は常に考慮されます。おそらく、その互換性、どのブラウザ...
1. ファイルの権限と所有権の概要1. アクセス権Read r: ファイルの内容を表示し、ディレクト...
プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルタ...
皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...
1. テーブルステートメントを作成します。 テーブル「従業員」を作成します( `emp_no` in...
目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...
第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...
この記事では、Xshell と関連する構成の一般的な問題について説明します。この記事の構成は、主に ...
目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...
最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...
目次ケースシナリオ問題を解決するまとめケースシナリオ本日、オンラインで問題が発見されました。監視範囲...
CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...
まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...
この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...
この記事の例では、ストップウォッチタイマーを実装するためのJSの具体的なコードを参考までに共有してい...