Layuiはログインインターフェース検証コードを実装します

<div class="layui-form-item">
    <div class="layui-col-xs6">
      <input type="text" value="" placeholder="確認コードを入力してください（大文字と小文字は区別されません）" class="input-val"> 
      <キャンバスid="キャンバス" 幅="100" 高さ="30"></キャンバス>  
     </div>
      <div>
      <input type="button" value="ログイン" class="layui-btn layui-btn-fluid" lay-submit lay-filter="ログイン"> 
      </div>         
</div>

var show_num=[];
  $(関数()
  {
   描画(表示番号)
   $("#canvas").on('クリック',function()
   {
  描画(表示番号)      
   })      
  });

関数draw(show_num) {
            var canvas_width = $('#canvas').width();
            var canvas_height = $('#canvas').height();
            var canvas = document.getElementById("canvas"); // キャンバス オブジェクト (俳優) を取得します。 var context = canvas.getContext("2d"); // キャンバス描画環境 (俳優のパフォーマンス ステージ) を取得します。 canvas.width = canvas_width;
            キャンバスの高さ = キャンバスの高さ;
            var sCode = "A、B、C、E、F、G、H、J、K、L、M、N、P、Q、R、S、T、W、X、Y、Z、1、2、3、4、5、6、7、8、9、0";
            var aCode = sCode.split(",");
            var aLength = aCode.length; //配列の長さを取得します for (var i = 0; i <= 3; i++) {
                var j = Math.floor(Math.random() * aLength); //ランダムなインデックス値を取得します。 var deg = Math.random() * 30 * Math.PI / 180; //0から30の間のランダムなラジアンを生成します。 var txt = aCode[j]; //ランダムなコンテンツを取得します。 show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20; //キャンバス上のテキストのx座標var y = 20 + Math.random() * 8; //キャンバス上のテキストのy座標context.font = "bold 23px Microsoft YaHei";

                コンテキストを翻訳します(x, y);
                コンテキストを回転します(度);

                context.fillStyle = ランダムカラー();
                コンテキスト.fillText(txt, 0, 0);

                コンテキストを回転します(-deg);
                コンテキストを翻訳します(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //検証コードに線を表示します context.strokeStyle = randomColor();
                コンテキスト.beginPath();
                コンテキストを移動します。(Math.random() * キャンバスの幅、Math.random() * キャンバスの高さ)
                context.lineTo(Math.random() * キャンバスの幅、Math.random() * キャンバスの高さ);
                コンテキスト.stroke();
            }
            for (var i = 0; i <= 30; i++) { //検証コードに小さなドットを表示します context.strokeStyle = randomColor();
                コンテキスト.beginPath();
                var x = Math.random() * キャンバス幅;
                var y = Math.random() * canvas_height;
                コンテキストを移動します(x, y);
                コンテキスト.lineTo(x + 1, y + 1);
                コンテキスト.stroke();
            }
        }

        function 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 + ")" を返します。
        }

<スタイル>
        .コード {
            幅: 100%;
            マージン: 0 自動;
        }
        .入力値 {
            幅: 63%;
            背景: #ffffff;
            高さ：2.8rem;
            パディング: 0 2%;
            境界線の半径: 5px;
            境界線: なし;
            境界線: 1px実線rgba(0,0,0,.2);
            フォントサイズ: 0.9rem;
        }
        #キャンバス {
            フロート: 右;
            表示: インラインブロック;
            境界線: 1px 実線 #ccc;
            境界線の半径: 5px;
            カーソル: ポインタ;
        }
</スタイル>