上源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端生成验证码</title>
</head>
<body>
<!--画布节点-->
<canvas id="canvas" width="160" height="50"></canvas>
</body>
<script>
    // 数字，大写字母，小写字母对应的阿斯克码值
    // '0'-'9':48-57
    // 'A'-'Z':65-90
    // 'a'-'z':97-122
    // 获取随机数(随机验证码、canvas随机值都使用到此函数)
    const getRandom = (min, max) => {
        return Math.floor(Math.random() * (max - min + 1)) + min
    }
    // 获取随机颜色
    const getColor = (min, max) => {
        let r = getRandom(min, max);
        let g = getRandom(min, max);
        let b = getRandom(min, max);
        return `rgb(${r},${g},${b}`
    }
    // 获取验证码,在获取的过程中绘制文字、干扰线、干扰圆点
    const getVerificationCode = (selector, width, height) => {
        /**
         * 这里是定义画布
         * **/
            // 获取节点元素
        let canvas = document.querySelector(selector);
        // 获取画布
        let ctx = canvas.getContext('2d');
        // 绘制背景,先获取背景颜色，再设置绘制的起始坐标，以及绘制的宽高
        ctx.fillStyle = getColor(215, 250);
        ctx.fillRect(0, 0, width, height);
        /**
         * 这里是获取验证码，并且绘制到画布
         * **/
            // 定义一个字符串，保存验证码结果
        let verificationCode = '';
        // 循环5次,获取五个验证码字符，并且绘制到画布上
        for (let i = 0; i < 5; i++) {
            // 得到字符的ASCII码值
            let ascii = getRandom(48, 122);
            // 在这个范围的ascii码是无效的，i--，跳过此次循环
            if ((ascii > 57 && ascii < 65) || (ascii > 90 && ascii < 97)) {
                i--;
                continue;
            }
            // ascii码有效
            // 通过ASCII码值得到相应的字符
            const c = String.fromCharCode(ascii);
            // 拼接验证码
            verificationCode += c;
            /**
             * 以上部分已经获取到了所有验证码
             * 以下的代码是设置文字的渲染样式
             */
            // 随机字体大小
            let fontSize = getRandom(height-(height*.4), height-(height*.1));
            // 设置字体大小和字体类型
            ctx.font = fontSize + 'px Simhei';
            // 设置文字的基线，这里设置以顶部为基线
            ctx.textBaseline = 'top';
            // 设置字体的填充颜色
            ctx.fillStyle = getColor(80, 150);
            // 保存样式
            ctx.save();
            // 设置文字的位移
            ctx.translate(30 * i + 20, 10);
            // 随机字体旋转角度
            let deg = getRandom(-30, 30);
            // 设置文字的旋转角度
            ctx.rotate(deg * Math.PI / 180);
            // 绘制文字
            ctx.fillText(c, -10, -10);
            // 恢复，准备绘制下一个文字
            ctx.restore();
        }
        /**
         * 这里是绘制干扰线
         * **/
        // 随机干扰线
        for (let j = 0; j < 5; j++) {
            // 干扰线起始路径
            ctx.beginPath();
            // 起点
            ctx.moveTo(getRandom(0, width), getRandom(0, height));
            // 终点
            ctx.lineTo(getRandom(0, width), getRandom(0, height));
            // 随机干扰线颜色
            ctx.strokeStyle = getColor(180, 230);
            // 关闭路线
            ctx.closePath();
            // 绘制路线
            ctx.stroke();
        }
        /**
         * 这里是绘制小圆点
         * **/
        // 随机干扰圆点
        for (let j = 0; j < 40; j++) {
            ctx.beginPath();
            // 设置圆点的位置，半径，形状
            ctx.arc(getRandom(0, width), getRandom(0, height), 1, 0, 2 * Math.PI);
            ctx.closePath();
            // 设置圆点颜色
            ctx.fillStyle = getColor(150, 200);
            // 绘制圆点
            ctx.fill();
        }
        // 返回验证码（这里只是一个验证码字符串）
        return verificationCode;
    }
    let verificationCode = getVerificationCode('#canvas', 160, 60);
    console.log("生成的验证码是：", verificationCode);
</script>
</html>

此代码向小伙伴介绍的是利用canvas绘制带干扰线的验证码，主要利用canvas制定带干扰线的功能，做出一个验证码生成器，在业务当中如果有此需求，这个还是具有一定的参考价值，需要的小伙伴可以参考一下。

好了，这篇文章的内容营销圈就和大家分享到这里，如果大家对网络推广引流和网络创业项目感兴趣，可以添加微信：Sum8338 备注：营销圈引流学习，我拉你进直播课程学习群，每周135晚上都是有实战的推广引流技术和网络创业项目课程分享，当然是免费学！

canvas 字体，如何利用canvas 字体打造生成器？

上源码：

相关推荐