canvas验证码

最新推荐文章于 2023-07-02 15:46:19 发布

原谅8943

最新推荐文章于 2023-07-02 15:46:19 发布

阅读量249

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： canvas 验证码 js 代码

本文链接：https://blog.youkuaiyun.com/HY200043/article/details/88783778

css 专栏收录该内容

5 篇文章

订阅专栏

canvas验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #ccc;
        }
        canvas{
            margin-left: 100px;
            margin-top: 30px;
        }
        input{
            width: 150px;
            height: 40px;
            position:absolute;
            top: 30px;
            left: 230px;
        }
        button{
            position:absolute;
            top: 32px;
            left: 390px;
            padding:10px;
            background-color: pink;
            cursor: pointer;
            border:none;
        }
    </style>
</head>
<body>
<canvas width="120" height="40" style="border:1px solid #000"></canvas>
<input type="text" placeholder="请输入图片内字符">
<button>点我验证</button>
<script>
    var can=document.getElementsByTagName("canvas")[0];
    var inp=document.getElementsByTagName("input")[0];
    var btn=document.getElementsByTagName("button")[0];
    var ctx=can.getContext("2d");
    var str="qwertyuiopasdfghjklzxcvbnm1234567890";
    var deg=Math.PI/180*getRandom(-10,30);
    var countent="";
    reset();
    function reset(){
        for(var i=0;i<8;i++){
            ctx.beginPath();
            ctx.fillStyle=getColor(150,230);
            ctx.arc(getRandom(5,115),getRandom(5,35),3,0,Math.PI*2);
            ctx.fill();
        }
        for(var i=0;i<6;i++){
            ctx.beginPath();
            ctx.strokeStyle=getColor(150,230);
            ctx.moveTo(getRandom(5,115),getRandom(5,35));
            ctx.lineTo(getRandom(5,115),getRandom(5,35));
            ctx.stroke();
        }
        for(var i=0;i<4;i++) {
            ctx.beginPath();
            ctx.fillStyle = getColor(80, 120);
            var text = str[parseInt(Math.random() * (str.length - 1))];
            countent += text;
            ctx.textAlign = "center";
            ctx.textBaseline = "top";
            ctx.font = "18px '楷体'";
            ctx.translate(i * 30, 0);
            ctx.rotate(deg);
            ctx.fillText(text, getRandom(11, 20), getRandom(2, 20));
            ctx.rotate(-deg);
            ctx.translate(-i * 30, 0);
            ctx.stroke();
        }
    }
    btn.onclick=function(){
        if(inp.value==countent){
            alert("验证码正确");
            inp.value="";
            ctx.clearRect(0,0,120,40);
            countent="";
            reset();
        }else{
            alert("验证码有误");
            inp.value="";
        }
    }
    function getRandom(min,max){
        return parseInt(Math.random()*(max-min+1)+min);
    }
    function getColor(min,max){
        var r=getRandom(min,max);
        var g=getRandom(min,max);
        var b=getRandom(min,max);
        return "rgb("+r+","+g+","+b+")";
    }
</script>
</body>
</html>