最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

本篇文章給大家分享的是有關使用canvas怎么實現一個圖形驗證碼功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯專注于炎陵企業(yè)網站建設,成都響應式網站建設公司,商城網站開發(fā)。炎陵網站建設公司,為炎陵等地區(qū)提供建站服務。全流程按需定制開發(fā)，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯專業(yè)和態(tài)度為您提供的服務

    
        
        
        
            canvas {
                border: 1px solid red;
            }
        
    

    
        
            您的瀏覽器不支持canvas
        
    
    
        var myCanvas = document.getElementById("myCanvas");
        var context = myCanvas.getContext("2d");
        //隨機字符（透明度）（大小隨機，位置隨機）；
        var strStore = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        //隨機函數
        function roundNum(min, max) {
            return parseInt(Math.random() * (max - min) + min);
        }
        //文字內容部分：
        var str = "";
        for(var i = 0; i < 5; i++) {
            context.beginPath();
            //隨機顏色（淺色：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個左右的隨機（長度隨機，位置隨機），干擾線
        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();
        }

        //干擾項：10個左右的隨機（半徑隨機，位置隨機），干擾圓
        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();
        }
        
    

結果如圖：

以上就是使用canvas怎么實現一個圖形驗證碼功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯行業(yè)資訊頻道。

當前題目：使用canvas怎么實現一個圖形驗證碼功能-創(chuàng)新互聯
文章分享：http://fisionsoft.com.cn/article/dhshjd.html