canvas画布中绘制登录验证码

实现点击画布，刷新绘制验证码

html标签，

 js代码

  //1. 产生随机数的函数
        function rn(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
        }

        //2. 产生随机色的函数
        function rc(min, max) {
            let r = rn(min, max);
            let g = rn(min, max);
            let b = rn(min, max);
            return `rgb(${r},${g},${b})`;
        }

        //开启vscode中canvas的代码提示
        /** @type {HTMLCanvasElement} */
        let cas = document.getElementById('cas');//获取页面中的画布
        let ctx = cas.getContext('2d');//获取2d画笔

        let str = '';//保存产生的4个随机字符
        verifity();//调用函数保证渲染
        // 产生随机字符串
        function verifity() {
            const pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
            //3.填充颜色,颜色需浅
            const w = 120;
            const h = 40;
            ctx.fillStyle = rc(180, 230);
            ctx.fillRect(0, 0, w, h);

            //4. 绘制文字
            str = '';//清空str的上一次的内容
            for (let i = 0; i < 4; i++) {
                let s = pool[rn(0, pool.length)];//随机的字符
                let fs = rn(18, 40);//字体大小
                let deg = rn(-30, 30);
                ctx.font = fs + 'px Simhei';//字体的样式
                ctx.textBaseline = 'top';//绘制文本的基线:以上边线为界
                ctx.fillStyle = rc(80, 150);//设置填充颜色
                ctx.save();//保存前面对画笔的设置

                ctx.translate(30 * i + 15, 15);//平移坐标系
                ctx.rotate(deg * Math.PI / 200);//设置文本的偏转角度
                ctx.fillText(s, -15 + 5, -15);//绘制文本
                ctx.restore();//清除前面画笔的设置,画笔恢复初始装态
                str += s;
            }
            //5. 随机产生8条干扰线,颜色需浅
            for (let i = 0; i < 8; i++) {
                ctx.beginPath();//重置路径
                ctx.moveTo(rn(0, w), rn(0, h));//设置线条起点
                ctx.lineTo(rn(0, w), rn(0, h));
                ctx.closePath();//关闭路径
                ctx.strokeStyle = rc(150, 200);
                ctx.stroke();
            }

            //6. 随机产生40个干扰小圆点
            for (let i = 0; i < 40; i++) {
                ctx.beginPath();
                ctx.arc(rn(0, w), rn(0, h), 1, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fillStyle = rc(150, 200);
                ctx.fill();
            }

        }

        // 验证码value 校验
        document.getElementById('ver').onblur = function fn() {

            let val = document.getElementById('ver').value;
            val = val.toUpperCase();//转化为大写
            // 获取提示文本元素
            let pro = document.querySelector('.pro');
            if (str === val) {
                pro.classList.remove('no');
                pro.classList.add('ok');
                pro.innerHTML = '验证码正确';
            } else {
                pro.classList.remove('ok');
                pro.classList.add('no');
                pro.innerHTML = '验证码错误';
            }

        }

页面中渲染画布如下