如何通過Html5生成驗(yàn)證碼

發(fā)布時(shí)間：2022-02-21 10:20:14 來源：億速云閱讀：230 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了如何通過Html5生成驗(yàn)證碼的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇如何通過Html5生成驗(yàn)證碼文章都會(huì)有所收獲，下面我們一起來看看吧。

利用Html5的canvas標(biāo)簽生成畫布,在畫布上利用隨機(jī)生成的數(shù)字畫上驗(yàn)證碼，背景為隨機(jī)生成的顏色和雜亂的直線與點(diǎn)點(diǎn)。

進(jìn)階：利用表單插件屬性綁定驗(yàn)證碼數(shù)據(jù)(json)可以在發(fā)送時(shí)候或者異步通信進(jìn)行后臺(tái)數(shù)據(jù)獲取與檢查。

代碼塊：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>驗(yàn)證碼</title>
<style type="text/css">
    #canvas{
        cursor:pointer;
    }
</style>
</head>
<body>
    <canvas id="canvas" width="150px" height="50px"></canvas>
<script>
        //生成隨機(jī)數(shù)
    function randomNum(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
        //生成隨機(jī)顏色RGB分量
    function randomColor(min,max){
        var _r = randomNum(min,max);
        var _g = randomNum(min,max);
        var _b = randomNum(min,max);
        return "rgb("+_r+","+_g+","+_b+")";
    }
    //先阻止畫布默認(rèn)點(diǎn)擊發(fā)生的行為再執(zhí)行drawPic()方法
    document.getElementById("canvas").onclick = function(e){
        e.preventDefault();
        drawPic();
    };
    function drawPic(){
        //獲取到元素canvas
        var $canvas = document.getElementById("canvas");
        var _str = "0123456789";//設(shè)置隨機(jī)數(shù)庫
        var _picTxt = "";//隨機(jī)數(shù)
        var _num = 4;//4個(gè)隨機(jī)數(shù)字
        var _width = $canvas.width;
        var _height = $canvas.height;
        var ctx = $canvas.getContext("2d");//獲取 context 對(duì)象
        ctx.textBaseline = "bottom";//文字上下對(duì)齊方式--底部對(duì)齊
        ctx.fillStyle = randomColor(180,240);//填充畫布顏色
        ctx.fillRect(0,0,_width,_height);//填充矩形--畫畫
        for(var i=0; i<_num; i++){
            var x = (_width-10)/_num*i+10;
            var y = randomNum(_height/2,_height);
            var deg = randomNum(-45,45);
            var txt = _str[randomNum(0,_str.length)];
            _picTxt += txt;//獲取一個(gè)隨機(jī)數(shù)
            ctx.fillStyle = randomColor(10,100);//填充隨機(jī)顏色
            ctx.font = randomNum(16,40)+"px SimHei";//設(shè)置隨機(jī)數(shù)大小，字體為SimHei
            ctx.translate(x,y);//將當(dāng)前xy坐標(biāo)作為原始坐標(biāo)
            ctx.rotate(deg*Math.PI/180);//旋轉(zhuǎn)隨機(jī)角度
            ctx.fillText(txt, 0,0);//繪制填色的文本
            ctx.rotate(-deg*Math.PI/180);
            ctx.translate(-x,-y);
        }
        for(var i=0; i<_num; i++){
            //定義筆觸顏色
            ctx.strokeStyle = randomColor(90,180);
            ctx.beginPath();
            //隨機(jī)劃線--4條路徑
            ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
            ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
            ctx.stroke();
        }
        for(var i=0; i<_num*10; i++){
            ctx.fillStyle = randomColor(0,255);
            ctx.beginPath();
            //隨機(jī)畫原，填充顏色
            ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
            ctx.fill();
        }
        return _picTxt;//返回隨機(jī)數(shù)字符串
    }
    drawPic();
</script>
</body>
</html>

關(guān)于“如何通過Html5生成驗(yàn)證碼”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“如何通過Html5生成驗(yàn)證碼”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何通過Html5生成驗(yàn)證碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽