SVG最详细的带干扰线条的随机数验证码

最新推荐文章于 2021-07-01 22:23:31 发布

子筱

最新推荐文章于 2021-07-01 22:23:31 发布

阅读量957

点赞数 2

分类专栏：前端文章标签：随机数验证码

本文链接：https://blog.csdn.net/qq_44357454/article/details/86728450

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

什么是svg？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

svg中的标签

<line> 元素是用来创建一个直线

<line x1="69" y1="9" x2="40" y2="6" stroke="red" stroke-width="1"></line>

(x1,y1)为起点坐标（x2,y2）为下一个点的坐标两点连接成一条直线，stroke给线条添加颜色，stroke-width线条的宽度.

<text> 元素用于定义文本

<text x="80" y="20" fill="red" rotate="13" style="font-size:21px">E</text>

(x,y)为文本内容的坐标，fill添加背景色 rotate旋转的角度，E为文本内容。

做出来的效果如下：
在这里插入图片描述

给svg一个样式

        svg {
            width: 200px;
            height: 50px;
            border: 1px solid black;
            font-weight: bold;
            font-family: "宋体"
        }

html两个标签

    <svg id="svgEle"></svg>
    <p>看不清换一张</p>

JS部分

   		//获取到两个节点
        let svgEle = document.getElementById("svgEle");
        let pEle= document.querySelector("p");
        //定义了数字、大小写字母一个字符串，用来显示在svg上
        let a = "1234567890qwertyuiopasdfghjklmnbvcxzQWERRTIPOASDFGHJKLZXCVBNM";
        render();//一进来页面就渲染一次
        pEle.onclick = function () { //绑定到p节点上，点击就重新渲染一下页面，验证码随机
            render();
        }
		//封装函数
        function render() {
            let j = random(10, 18)//调用随机数生成10到18的一个数字，用来随机线条的条数
            let str = "";//利用字符串拼接添加到svg节点
            let math = "";//用来保存随机出来的验证码
			//生成随机线条
            for (let i = 0; i < j; i++) {//j为一个变量，随机生成，颜色随机、坐标随机、宽度随机。
                str += `<line  x1="${random(svgEle.clientWidth)}" y1="${random(svgEle.clientHeight)}" 
                              x2="${random(svgEle.clientWidth)}" y2="${random(svgEle.clientHeight)}" 
                              stroke="rgb(${random(255)},${random(255)},${random(255)}"
                              stroke-width="${random(1, 2)}">
                        </line>`
            }
            //生成4个随机数字或字母，颜色随机、坐标随机、大小随机。
            for (let i = 0; i < 4; i++) {
                let temp = a[random(arr.length - 1)];//用来保存每循环一次在字符串a中找到的字符
                str += `<text x="${random(svgEle.clientWidth / 4 * i, svgEle.clientWidth / 4 * i + 25)}" 
                            y="${svgEle.clientHeight - 28}"
                            fill="rgb(${random(255)},${random(255)},${random(255)}" 
                            rotate="${random(90)}"
                            style="font-size:${random(20, 30)}px">
                            ${temp}
                        </text>`
                math += temp;
            }
            svgEle.innerHTML = str;//最后在拼接在svg标签里
        }
		//这里封装了一个随机数的函数,传两个比如random(1，10)随机成包含1到10的整数，
		传一个参数random(10)，默认另一个为0，随机生成包含0到10的整数.
        function random(min, max = 0) {
            if (min > max) {
                [min, max] = [max, min];
            }
            let s = parseInt(Math.random() * (max - min + 1) + min);
            return s;//
        }