この記事では、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 でのルーティングと仮想マシン ネットワークの設定に関する詳細なグラフィック説明
その理由は、このタイプの Web ページが WAP と呼ばれるワイヤレス プロトコルから生成されたた...
1. Navicatの紹介1. Navicat とは何ですか? Navicat は強力な MySQ...
目次序文1. Axiosの紹介2. HTTPインターセプターの設計と実装2.1 インターセプターの紹...
mysql5.6.28のインストールと設定方法1. 基本的なシステム情報を確認し、yumでインストー...
目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...
inline-flex は inline-block と同じです。内部要素用の display:fl...
RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...
console.log( [] == ![] ) // 真 console.log( {} == ...
1. インラインスタイル仮想DOMにインラインスタイルを追加するには、式を使用してスタイルオブジェク...
例:場所のルートとエイリアスルートディレクティブは、ルートによって設定されたディレクトリに検索ルート...
序文: MySQL データベースは、よく使用される集計関数、日付および文字列処理関数など、幅広い関数...
W3C では、さまざまなタグの規定を設定するだけでなく、Web ページの作成者が実際に W3C 規...
背景:インターフェイスを提供する Flask プロジェクトがあり、これは Docker コンテナを使...
この記事の例では、ふるい抽選を実装するためのミニプログラムの具体的なコードを参考までに共有しています...