利用SVG技术制作验证码

最新推荐文章于 2024-08-22 08:37:34 发布

weixin_49596018

最新推荐文章于 2024-08-22 08:37:34 发布

阅读量449

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_49596018/article/details/109694339

版权

本文介绍了如何使用SVG（可缩放矢量图形）技术来制作验证码。通过展示html和js代码块，详细阐述了验证码的生成过程，提供了一种利用矢量图形实现验证码的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

一、html代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码</title>
</head>
<style>
  
</style>
<body>
 <!-- 验证码主题区域 -->
    <article>
        <!-- 画布 -->
       
    </article>
    <!-- 看不清换一张 -->
    <footer>
        看不清换一张
    </footer>

    <script src="./验证码.js"></script>
</body>
</html>

二、js代码块

// 获取画布
let svgEle = document.getElementsByTagName("svg")[0];

let artEle = document.getElementsByTagName("article")[0];

let footEle = document.getElementsByTagName("footer")[0];
// art样式设置
Object.assign(artEle.style, {
    width: 200 + "px",
    height: 50 + "px",
    margin: "0 auto",
    border: "1px solid red"
})
// 样式设置
Object.assign(footEle.style, {
    width: 200 + "px",
    height: 50 + "px",
    margin: "0 auto",
    border: "1px solid red",
    textAlign: "center",
    lineHeight: "50px",
    cursor: "pointer"
})
// 看不清换一张  鼠标移入更换背景色
footEle.addEventListener("mouseenter", function (e) {
    let event = e || window.event;
    e.target.style.backgroundColor = "red"
})
footEle.addEventListener("mouseout", function (e) {
    let event = e || window.event;
    e.target.style.backgroundColor = ""
})

// 构造器
class NewNumber {
    constructor(lineNum, wordNum) {
        this.lineNum = lineNum;
        this.wordNum = wordNum;
        this.init();
    }
    // 初始化，添加线条
    init() {
        this.reder();
    }
    // 方法设置
    // 随机数函数
    getNum(min, max = 0) {
        min > max ? [min, max] = [max, min] : "";
        return parseInt(Math.random() * (max - min + 1) + min);
    }
    // 获取随机数
    word() {
        let str = "0123456789ABCDEFGHIJK";
        return str[this.getNum(str.length - 1)];
    }
    // 文字标签添加
    tspan() {
        let str = "";
        // 需要添加几个文字
        for (let j = 1; j <= this.wordNum; j++) {
            // Tspan 的Xy定义左上角起点坐标 fill是填充色  rotata是旋转角度
            str += `
            <tspan x="${j * 20}" y="${this.getNum(20, 50 - 20)}" fill="rgb(${this.getNum(255)},${this.getNum(255)},${this.getNum(255)})" rotate="${j % 2 == 0 ? j * 10 : j * -10}">
                ${this.word()}
            </tspan>
            `
        }
        return str;
    }
    // 线条样式设置
    // section的宽高为400px 和50px
    line() {
        let str = "";
        // x1 y1定义起点坐标；x2 y2定义终点坐标  stroke定义样式
        for (let i = 0; i < this.lineNum; i++) {
            str += `
            <line x1="0" y1="${this.getNum(50)}" 
                  x2="200" y2="${this.getNum(50)}" 
                  stroke="rgb(${this.getNum(255)},${this.getNum(255)},${this.getNum(255)})"
            />
            `
        }
        return str;
    }
    // 渲染：添加文字和线条
    reder() {
        artEle.innerHTML = `
        <svg width="400"  height="50">
        <text>
        ${this.tspan()}
        </text>
        ${this.line()}
        </svg>
        `
    }

}
// 需要几个文字，几个线条就传值进去
new NewNumber(4, 6);

// 看不清换一张
footEle.addEventListener("click", function (e) {
    new NewNumber(4, 6);
})