canvas实现干扰随机验证码

最新推荐文章于 2022-05-11 09:41:38 发布

Tonglanlinling

最新推荐文章于 2022-05-11 09:41:38 发布

阅读量436

点赞数 2

分类专栏： canvas 文章标签： canvas 验证码随机项干扰项

本文链接：https://blog.csdn.net/Tonglanlinling/article/details/90051444

版权

canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果展示:

代码展示:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 模板</title>
    <style>
        canvas {
            border: 1px solid #000;
            vertical-align: bottom;
        }
        input{
            width: 120px;
            height: 40px;
            vertical-align: bottom;
            padding: 0;
            border: 1px solid #000;
            text-indent: 5px;
        }
    </style>
</head>
<body>
<canvas width="120" height="40"></canvas>
<input type="text" placeholder="验证">
<button>验证</button>
<script>
    var mcanvas = document.querySelector("canvas");
    var ctx = mcanvas.getContext("2d");
    var text = "0123456789zxcvbnmlkjhgfdsaqwertyuiop";
    var content = "";
 
    mcanvas.onclick =function () {
        ctx.clearRect(0,0,120,40);
        reset();
    };


   reset();
   function reset() {
       //   绘制验证码文本
       for(var i = 0; i < 4; i++){
           ctx.beginPath();
           ctx.fillStyle = getRandomColor(80,120);
           ctx.textBaseline = "top";
           ctx.font = "18px '微软雅黑'";
           ctx.textAlign="center";
           var rtext = text[Mathrandom(0,text.length-1)];
           content+=rtext;
             //旋转
           ctx.translate(i*30,0);
           var mdeg = Mathrandom(0,30);
           ctx.rotate(Math.PI/180*mdeg);
           ctx.fillText(rtext,Mathrandom(12,25),Mathrandom(2,20));
           ctx.rotate(-Math.PI/180*mdeg);
           ctx.translate(-i*30,0);
       }

       //    线
       for (var i = 0; i < 4; i++) {
           ctx.beginPath();
           ctx.strokeStyle = getRandomColor(120, 220);
           ctx.moveTo(Mathrandom(0,30),Mathrandom(0,40));
           ctx.lineTo(Mathrandom(90,110),Mathrandom(0,40));
           ctx.stroke();
       }

       //    点
       for (var i = 0; i < 25; i++) {
           ctx.beginPath();
           ctx.fillStyle = getRandomColor(120, 220);
           ctx.arc(Mathrandom(5, 110), Mathrandom(5, 35), 1, 0, Math.PI * 2);
           ctx.fill();
       }

   }
    //    定义范围
    function Mathrandom(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    }

    //    获取随机色
    function getRandomColor(min, max) {
        var r = Mathrandom(min, max);
        var g = Mathrandom(min, max);
        var b = Mathrandom(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    //验证功能
    document.querySelector("button").onclick = function () {
       var minput =  document.querySelector("input");
        var inputValue =minput.value;
        console.log(content);
        if(inputValue===content){
           alert("走你！！！");
            minput.value = "";
           ctx.clearRect(0,0,120,40);
           content="";
           reset();
       }else{
           alert("错误");
           minput.value = "";
       }
    }


</script>
</body>
</html>

Tonglanlinling

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
canvas实现干扰随机验证码

效果展示:代码展示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas 模板</title> <style> canvas { bor...
复制链接

扫一扫