亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

canvas基礎(chǔ)之圖形驗(yàn)證碼的示例

  發(fā)布時(shí)間:2018-01-02 14:38:51   作者:shizhuanzhi   我要評(píng)論
這篇文章主要介紹了canvas基礎(chǔ)之圖形驗(yàn)證碼的示例的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在通常的登錄界面我們都可以看到驗(yàn)證碼,驗(yàn)證碼的作用是檢測(cè)是不是人在操作,防止機(jī)器等非人操作,防止數(shù)據(jù)庫(kù)被輕而易舉的攻破。

驗(yàn)證碼一般用PHP和java等后端語(yǔ)言編寫(xiě);

但是在前端,用canva或者SVG也可以繪制驗(yàn)證碼;

直接上干貨:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas {
                border: 1px solid red;
            }
        </style>
    </head>

    <body>
        <canvas id="myCanvas" width="100" height="40">
            您的瀏覽器不支持canvas
        </canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById("myCanvas");
        var context = myCanvas.getContext("2d");
        //隨機(jī)字符(透明度)(大小隨機(jī),位置隨機(jī));
        var strStore = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        //隨機(jī)函數(shù)
        function roundNum(min, max) {
            return parseInt(Math.random() * (max - min) + min);
        }
        //文字內(nèi)容部分:
        var str = "";
        for(var i = 0; i < 5; i++) {
            context.beginPath();
            //隨機(jī)顏色(淺色:RGB - 200~250)
            var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`;
            context.fillStyle = color;
            context.font = roundNum(20,30)+"px Arial";
            context.textAlign = "center";
            str = strStore[roundNum(0,strStore.length)];
            context.fillText(str, 10 + 18 * i, roundNum(20,35));
        }

        //10個(gè)左右的隨機(jī)(長(zhǎng)度隨機(jī),位置隨機(jī)),干擾線(xiàn)
        for(var j = 0; j < roundNum(5, 10); j++) {
            context.beginPath();
            var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`;
            context.strokeStyle = color;
            context.moveTo(roundNum(0, 100), roundNum(0, 40));
            context.lineTo(roundNum(0, 100), roundNum(0, 40));
            context.stroke();
        }

        //干擾項(xiàng):10個(gè)左右的隨機(jī)(半徑隨機(jī),位置隨機(jī)),干擾圓
        for(var j = 0; j < roundNum(5, 10); j++) {
            context.beginPath();
            context.fillStyle = color;
            context.arc(roundNum(0, 100), roundNum(0, 40), roundNum(0, 5), Math.PI * 2 / (roundNum(1, 360)), Math.PI * 2 / (roundNum(1, 360)));
            context.fill();
        }
        
    </script>

</html>

結(jié)果如圖:

至于要拿來(lái)咋用,就看大家高興了。想怎么整這么整。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 用canvas顯示驗(yàn)證碼的實(shí)現(xiàn)

    這篇文章主要介紹了用canvas顯示驗(yàn)證碼的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-10
  • 利用html5 canvas破解簡(jiǎn)單驗(yàn)證碼及getImageData接口應(yīng)用

    :HTML 5中的canvas有個(gè)接口getImageData可以用來(lái)從驗(yàn)證碼圖像中取得像素?cái)?shù)據(jù)。每一個(gè)像素有對(duì)應(yīng)r,g,b,a四個(gè)值,r,g,b是紅綠藍(lán)三色,a是透明度;觀(guān)察了一下,接下來(lái)說(shuō)下思路
    2013-01-25
  • canvas實(shí)現(xiàn)滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例

    這篇文章主要介紹了canvas實(shí)現(xiàn)滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)
    2020-08-11

最新評(píng)論