canvas画布中绘制登录验证码

。Idea

已于 2022-12-06 19:54:46 修改

阅读量236

点赞数

文章标签： javascript 前端 vue.js

于 2022-12-06 09:29:21 首次发布

本文链接：https://blog.csdn.net/weixin_46672437/article/details/128196976

版权

本文介绍了如何利用HTML5的canvas元素结合JavaScript技术，在前端实现点击刷新验证码的功能。通过示例代码展示了从创建画布到绘制验证码的具体步骤，确保页面中能够正确渲染并交互更新验证码。

摘要由CSDN通过智能技术生成

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

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 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234