Canvas制作简易验证码

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <title>原生canvas开发验证码</title> 
  <link rel="stylesheet" href="" /> 
  <style>
        *{margin: 0;padding: 0;}
        body{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            margin-top: 40px;
        }
        a{
            display: block;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
        }
    </style> 
 </head> 
 <body> 
  <script>
        function randomColor(){
            var r = Math.floor(Math.random()*255);
            var g = Math.floor(Math.random()*255);
            var b = Math.floor(Math.random()*255);
            return "rgb("+r+","+g+","+b+")"
            // return `rgb(r,g,b)`;
        }
        window.onload = function(){
            // alert("hh");
            draw();
            document.getElementById("bgimg").onclik = function(){
                draw();
            }
        }
        function draw(){
            var Canvas = document.getElementById("Canvas");//获取到canvas的对象
            var context = Canvas.getContext('2d');//获取到canvas画图环境
            var width = Canvas.width = 200;//画布的长度
            var height = Canvas.height = 60;//画布的高度
            context.strokeRect(0,0,width,height);//绘制画布
            var sData = "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,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,1,2,3,4,5,6,7,8,9,0";//数据
            var pData = sData.split(",");//生成数组
            var lData = pData.length;//获取数组的长度
            for (var i = 0; i < 4; i++) {
                var j = Math.floor(Math.random()*lData);//获取到随机的索引值
                var txt = pData[j];//得到随机的值
                console.log(txt);
                var x = 20+i*20;//内容在画布上的X坐标
                var y = 20+Math.random()*10;//内容在画布上的Y坐标
                var deg = Math.random()*360*Math.PI/180;
                context.font = "blod 56px 宋体";//设置内容的文本样式
                context.translate(x,y);//移动并设置坐标原点为x,y
                context.rotate(deg);
                context.fillStyle = randomColor();
                context.fillText(txt,0,0);
                context.rotate(-deg);
                context.translate(-x,-y);
            }
            //绘制干扰线
            for(var i = 0;i<6;i++){
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random()*width,Math.random()*height);
                context.lineTo(Math.random()*width,Math.random()*height);
                context.stroke();
            }
            // 绘制干扰点
            for(var i = 0;i<20;i++){
                context.strokeStyle = randomColor();
                context.beginPath();
                context.arc(Math.random()*width,Math.random()*height,1,0,2*Math.PI);//canvas的内置属性arc画圆(X坐标,Y坐标,半径,起始角,结束角)
                context.stroke();
            }
        }
    </script> 
  <canvas id="Canvas"></canvas> 
  <a href="" id="bgimg">点击切换</a>  
 </body>
</html>
Copyright © cnkj.site 2021 all right reserved,powered by Gitbook该文件修订时间: 2021-06-01 10:18:49

results matching ""

    No results matching ""