H5生成验证码

作者: 李玉凯 分类: HTML 发布时间: 2018-06-19 11:08

一、js文件如下:

//生成随机数
function randomNum(min,max){
    return Math.floor(Math.random()*(max-min)+min);
}
//生成随机颜色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+")";
}
//先阻止画布默认点击发生的行为再执行drawPic()方法
document.getElementById("canvas").onclick = function(e){
    e.preventDefault();
    drawPic();
};
var _picTxt = "";//随机数,设置成全局可供其他JS文件调用
function drawPic(){
    _picTxt="";
    //获取到元素canvas
    var $canvas = document.getElementById("canvas");
    var _str = "0123456789";//设置随机数库

    var _num = 4;//4个随机数字
    var _width = $canvas.width;
    var _height = $canvas.height;
    var ctx = $canvas.getContext("2d");//获取 context 对象
    ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
    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;//获取一个随机数
        ctx.fillStyle = randomColor(10,100);//填充随机颜色
        ctx.font = randomNum(16,40)+"px SimHei";//设置随机数大小,字体为SimHei
        ctx.translate(x,y);//将当前xy坐标作为原始坐标
        ctx.rotate(deg*Math.PI/180);//旋转随机角度
        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();
        //随机划线--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();
        //随机画原,填充颜色
        ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
        ctx.fill();
    }
    return _picTxt;//返回随机数字符串
}
drawPic();

二、使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
<style type="text/css">
    #canvas{
        cursor:pointer;
    }
</style>
<script>
function jump(){
  var picTxt = _picTxt;//从验证码JS文件获取到验证的数值
  var verifycode = $("#verifycode").val();
  if (verifycode == "" || verifycode != picTxt) {
      alert("验证码不对");
  }else{
      alert("验证码正确");
  }
}
</script>
</head>
<body>
    <canvas id="canvas" width="150px" height="50px"></canvas>
    <script type="text/javascript" src="/js/验证码文件名.js"></script>
    <button onclick="jump();" value="测试"></button>
</body>
</html>
//需注意验证码JS文件必须放在body标签里

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

邮箱地址不会被公开。 必填项已用*标注

− 2 = 3