<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。独自の動作はありませんが、クライアント側の JavaScript に描画 API を公開し、スクリプトがキャンバス上に必要なものを描画できるようにします。 コードは次のとおりです css: 入力{ 幅: 200ピクセル; 高さ: 32px; 境界線: 1px実線 #000; ボックスのサイズ: 境界線ボックス; } #c1{ 垂直位置合わせ: 中央; ボックスのサイズ: 境界線ボックス; カーソル: ポインタ; } #ボタン{ 表示: ブロック; 上マージン: 10px; 高さ: 32px; フォントサイズ: 16px; } html: <div class="code"> <input type="text" value="" id="inputValue" placeholder="確認コードを入力してください(大文字と小文字は区別されません)"> <canvas id="c1" width="100" height="30" style='border:1px solid black'></canvas> <button id="btn">送信</button> </div> JavaScript: $(関数(){ //ランダムな検証コードを保存する var showNum=[] 描画(表示数) $('#c1').on('クリック',function(){ 描画(表示数) }) $('#btn').on('クリック',function(){ var s = $('#inputValue').val().toLowerCase() var s1 = showNum.join("") s==s1の場合{ alert('送信に成功しました') }それ以外{ アラート('認証コードエラー') 描画(表示数) } }) //キャンバスにランダムな検証コードを描画する関数をカプセル化します。function draw(showNum){ //キャンバスを取得 var キャンバス = $('#c1') var ctx = キャンバス[0].getContext('2d') //キャンバスの幅と高さを取得します var canvas_width = canvas.width() var キャンバスの高さ = キャンバスの高さ() // 以前に描画した内容をクリアします//0,0 開始座標をクリアします// 四角形の幅と高さ ctx.clearRect(0,0,canvas_width,canvas_height) // 描画を開始します var scode='a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,0,1,2,3,4,5,6,7,8,9' コンソールログ("123"); var arrCode = scode.split(',') コンソールにログ出力します。 var arrLength = arrCode.length (var i=0;i<4;i++){ var インデックス = Math.floor(Math.random()*arrCode.length) //ランダムな文字 var txt = arrCode[index] showNum[i] = txt.toLowerCase() //文字の描画位置の制御を開始します var x=10+20*i//各認証コード描画の開始点のx座標 var y=20+Math.random()*8//開始点のy座標 ctx.font='bold 20px Microsoft YaHei' //文字の回転を開始します var deg = Math.random()-0.5 //Canvas は描画コンテンツの傾斜効果を実現したいので、まず平行移動する必要があります //回転ポイントをコンテンツが描画される場所に移動するには ctx.translate(x,y) ctx.rotate(度) //描画色をランダムな色に設定する ctx.fillStyle=randomColor() ctx.fillText(txt,0,0) //キャンバスを復元する ctx.rotate(-deg) ctx.translate(-x,-y) // ctx.stroke() } (var i=0;i<=30;i++){ もし(i<5){ //線を描く ctx.strokeStyle=randomColor() ctx.beginPath() ctx.moveTo(Math.random()*canvas_width,Math.random()*canvas_height) ctx.lineTo(Math.random()*canvas_width,Math.random()*canvas_height) ctx.ストローク() } //点を描く ctx.strokeStyle=randomColor() ctx.beginPath() x=Math.random()*キャンバス幅 y=Math.random()*canvas_height ctx.moveTo(x,y) ctx.lineTo(x+1,y+1) ctx.ストローク() } } 関数 randomColor(){ var r = Math.floor(Math.random()*256) var g = Math.floor(Math.random()*256) var b = Math.floor(Math.random()*256) `rgb(${r},${g},${b})` を返す } }) この効果を得るために キャンバスタグをクリックすると、画像が置き換えられます 入力が正しい場合は、「入力が正しい」というプロンプト ボックスがポップアップ表示されます。 エラーがある場合は、「入力エラー」というメッセージが表示され、[OK]をクリックすると確認コードボックスが表示されます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL における EXISTS と IN の使用法の比較
前面に書かれた注文テーブル、アクセス記録テーブル、商品テーブルなど、日常生活でデータベースを操作する...
目次Docker デプロイメント Always on クラスターDockerをインストールする建築関...
目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...
MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...
最近、次のような効果を実装しました。再生ボタンをクリックするとタイムラインの再生が開始され、一時停止...
オペレーティングシステム: Alibaba Cloud ESC インスタンス centos7.4ソフ...
目次クエリの背景1. クエリをいいね2. JSON関数クエリ3. 共同インデックスクエリ4. 全文イ...
概要zabbix バージョン 5.0 以降では、zabbix-agent2 という新しい機能が追加さ...
目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...
目次1. 父から息子へ2. 息子から父へ3. 親子関係のないコンポーネントの値の転送4. ヴュークス...
この記事の例では、動的な背景を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...
この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...
MySQL 8.0.12 のダウンロードとインストールのチュートリアルを録画し、全員と共有しました。...
最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...
ステートメント 1: <link rel="shortcut icon" ...