canvas绘制验证码

最新推荐文章于 2023-03-20 21:56:24 发布

善知九哥

最新推荐文章于 2023-03-20 21:56:24 发布

阅读量145

点赞数 5

文章标签： canvas 验证码 h5css3 原生js js源码

本文链接：https://blog.csdn.net/weixin_43811581/article/details/88777800

版权

效果展示：

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #000;
            vertical-align: bottom;
        }
        input{
            width:120px;
            height:40px;
            border: 1px solid #000;
            vertical-align: bottom;
            padding:0;
            text-indent:5px ;
        }
    </style>
</head>
<body>
<input type="text" placeholder="请输入验证码">
<canvas width="120" height="40"></canvas>
<button>提交</button>
<script>
    var canvas=document.getElementsByTagName("canvas")[0];
    var ctx=canvas.getContext("2d");
    var text="0123456789qwertyuioplkjmhngbfvdcsxaz"
    var content="";
    var btn=document.getElementsByTagName("button")[0];
    var ipt=document.getElementsByTagName("input")[0];
    reset();

    //定义随机数 指定位置到指定位置
    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 + ")";
    }
//    绘制点
    for(var i=0;i<30;i++) {
     ctx.beginPath();
     ctx.fillStyle=getRandomColor(120,250);
     ctx.arc(Mathrandom(3,118),Mathrandom(3,39),1,0,Math.PI*2);
     ctx.fill();
     }
//    绘制线
     for(var i=0;i<5;i++) {
      ctx.beginPath();
      ctx.strokeStyle=getRandomColor(120,250);
      ctx.moveTo(Mathrandom(3,118),Mathrandom(3,39));
      ctx.lineTo(Mathrandom(3,118),Mathrandom(3,39));
      ctx.stroke();
      }

      function reset(){
          //      绘制数字
          for(var i=0;i<4;i++) {
              ctx.beginPath();
              ctx.fillStyle=getRandomColor(10,50);
              ctx.font="20px '微软雅黑'";
              var yzm=text[Mathrandom(0,text.length-1)];
              content+=yzm;
//        ctx.fillText(yzm,i*30+Mathrandom(0,12),Mathrandom(12,30));
              ctx.translate(i*30,0);
              var deg=Mathrandom(0,30);
              ctx.rotate(Math.PI/180*deg);
              ctx.fillText(yzm,Mathrandom(0,12),Mathrandom(12,30))
              ctx.rotate(-Math.PI/180*deg);
              ctx.translate(-i*30,0);
          }
      }
//      提交点击事件
      btn.onclick=function(){
//          console.log(ipt.value,content);

          if(ipt.value==content){
              ctx.clearRect(0,0,120,40);
              alert("恭喜您验证成功！");
              ipt.value = "";
              content="";
              reset();
          }else{
              alert("请输入正确的验证码");
              ipt.value = "";
          }
      }
//      刷新验证码
    canvas.onclick=function(){
        ctx.clearRect(0,0,120,40);
        content=0;
        reset();
    }


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

善知九哥

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
canvas绘制验证码

效果展示：源码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1...
复制链接

扫一扫