分分钟学会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 + ")";
}

不防亲自动手试一试，距制作只差动动手指

分分钟学会Canvas绘制验证码

猜你喜欢