分分鐘學會Canvas繪製驗證碼

在登錄時我們經常遇到輸入驗證碼，看完這篇文章你也可以製作出驗證碼，讓驗證碼不再神奇。

效果如圖：

HTML代碼：

<canvas id="canvas"></canvas>
<button id="btn">點擊換一張</button>

JS代碼：

var canvas = document.getElementById("canvas");//獲取到canvas對象！
var context = canvas.getContext("2d");//獲取到canvas的繪圖環境！
canvas.width = 200;//設置canvas寬度
canvas.height = 40;//設置canvas高度
context.font = "bold 20px 微軟雅黑";//設置字體
context.strokeRect(0, 0, 200, 40);//繪製一個矩形框
var aCode = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

頁面加載和點擊按鈕刷新驗證碼：

getNewValidate();  //頁面加載先調用

var btn = document.getElementById("btn");		
//點擊刷新獲取新的驗證碼
btn.onclick=function(){
    getNewValidate();
}; 

生成驗證碼：

function getNewValidate(){
    context.clearRect(0,0,200,40);//清除畫布
    getValidate(6);//生成一個六位數的驗證碼
    drawPoint(100);//畫100個干擾點
    drawLine(8);//畫8條幹擾線
};

生成n位數的驗證碼：

function getValidate(n){
    for (var i = 0; i < n; i++) {
        var x = 20 + i * 20;
        var y = 20 + Math.random() * 10;
        var index = Math.floor(Math.random() * aCode.length);//獲取到隨機的索引值
        var txt = aCode[index];//獲取到隨機的內容
        context.fillStyle = getColor();//設置字體顏色
        context.translate(x, y);//字體移動
        var deg = 180 * Math.random() * Math.PI / 180;
        context.rotate(deg);//字體隨機旋轉度數
        context.fillText(txt, 0, 0);//將文字寫到canvas上面
        context.rotate(-deg);
        context.translate(-x, -y);
    }
}

畫X個干擾點：

function drawPoint(X){
    for (var i = 0; i < X; i++) {
        context.beginPath();
        var x = Math.random() * 200;
        var y = Math.random() * 40;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.strokeStyle = getColor();
        context.stroke();//開始繪製
    }
}

畫m條幹擾線：

function drawLine(m){
    for (var i = 0; i < m; i++) {
        context.beginPath(); //開始一個路徑
        context.moveTo(Math.random() * 200, Math.random() * 40);//設置起點座標
        context.lineTo(Math.random() * 200, Math.random() * 40);//設置終點座標
        context.strokeStyle = getColor();
        context.stroke();//開始繪製
    }
}

驗證碼隨機生成顏色值：

function getColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

不防親自動手試一試，距製作只差動動手指