canvasおよびjsを使用して検証コードを簡単に生成する方法

多くの場合、検証コードが必要であり、フロントエンド検証コードはHtml 5のcanvas知識点を知る必要がある.認証コード生成ステップは、1.キャンバスcanvas 2を生成します.乱数認証コード3を生成する.キャンバスに干渉線4を生成する.キャンバスに認証コードのテキストを埋め込む.キャンバスをクリックして認証コードを交換
構造とスタイル:

            canvas，        ~

次にjsコードを記述します.

    /*  4    */
    function rand(){
        var str="abcdefghijklmnopqrstuvwxyz0123456789";
        var arr=str.split("");
        var validate="";
        var ranNum;
        for(var i=0;i<4;i++){
            ranNum=Math.floor(Math.random()*36);   //    [0,35]  
            validate+=arr[ranNum];
        }
        return validate;
    }

    /*      x   */
    function lineX(){
        var ranLineX=Math.floor(Math.random()*90);
        return ranLineX;
    }

    /*      y   */
    function lineY(){
        var ranLineY=Math.floor(Math.random()*40);
        return ranLineY;
    }

    function clickChange(){
        var mycanvas=document.getElementById('mycanvas');
        var cxt=mycanvas.getContext('2d');
        cxt.fillStyle='#000';
        cxt.fillRect(0,0,90,40);
        
        /*     20 */
        for(var j=0;j<20;j++){
            cxt.strokeStyle='#fff';
            cxt.beginPath();    //   beginPath，                  
            cxt.moveTo(lineX(),lineY());
            cxt.lineTo(lineX(),lineY());
            cxt.lineWidth=0.5;
            cxt.closePath();
            cxt.stroke();
        }

        cxt.fillStyle='red';
        cxt.font='bold 20px Arial';
        cxt.fillText(rand(),25,25);   // rand()           canvas       
    }
 
    clickChange();

    /*       */
    mycanvas.onclick=function(e){
        e.preventDefault();   //             
        clickChange();
    };

これにより、一般的な検証コードが作成されます.もちろん、干渉線のランダムな色、干渉点の追加、テキストのランダムな位置のランダムな色など、最適化する必要がある点もたくさんあります.早速行ってみよう~
転載先:https://www.cnblogs.com/heyujun-/p/6658549.html