canvas创建验证码

弓禾

已于 2022-07-01 09:58:31 修改

阅读量96

点赞数

文章标签： javascript 开发语言 html

于 2022-06-30 16:05:56 首次发布

本文链接：https://blog.csdn.net/weixin_52618969/article/details/125542397

版权

本文介绍了使用HTML5 canvas和JavaScript实现前端验证码的详细过程。包括生成随机字符、随机字体大小、随机颜色以及干扰线的绘制，最后将canvas转换为图片显示。代码中涉及了数字、大小写字母的随机组合，以及验证码的验证逻辑。

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

前端写的验证码。主要是js。

html代码

<canvas id="myCanvas" width="100px" height="40px" hidden>您的浏览器不支持 HTML5 canvas 标签</canvas>
<img src="" id="myImg" alt="">

js代码

<script type="text/javascript">


    let myImg = document.getElementById("myImg");
    let myCanvas = document.getElementById("myCanvas");
    let ctx = myCanvas.getContext("2d")
    
    // 可被随机的数组
    let randArr = []

    // 数字0-9
    for(let i = 0; i <= 9; i++){
        randArr.push(i)
    }

    // 字母大小写
    let letter = null
    for(let i = 0; i < 26; i++){
        letter = String.fromCharCode(i + 65)
        randArr.push(letter)
    }
    for(let i = 0; i < 26; i++){
        letter = String.fromCharCode(i + 65).toLowerCase()
        randArr.push(letter)
    }

    /**
     * 随机字符
     * @return randArr数组中的字符(0-9,A-Z,a-z)
    */
    function randFun(){
        return randArr[Math.floor(Math.random() * randArr.length)] 
    }

    /**
     * 随机字体大小
     * @rerurn min与max之间的数
    */
    function sizeFun(min,max){
        return Math.floor(Math.random()*max) + min
    }

   /**
    * 随机颜色
    * @return 十六进制颜色值（#aaaaaa）
   */
    let colorArr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
    function colorRandFun(){
        function color(){
            return colorArr[Math.floor(Math.random()*colorArr.length)] 
        }
        return `#${color()}${color()}${color()}${color()}${color()}${color()}`
    }

    /**
     * 写入内容
     * codeArr 验证码数组，来存放数据
     * randFun 内容
     * randSizeFun 字体的大小
     * sum 值的下标 确定位置
    */
    let codeArr = []
    function setCodeText(randFun,randSizeFun,sum){
        // 字体的渐变
        let gradient = ctx.createLinearGradient(0,0,myCanvas.width,myCanvas.height);
        gradient.addColorStop("0",colorRandFun());
        gradient.addColorStop("0.5",colorRandFun());
        gradient.addColorStop("1",colorRandFun());
        ctx.fillStyle = gradient;
        ctx.font=`${randSizeFun}px Arial`;
        ctx.fillText(randFun,10 + sum * 20,randSizeFun)
        codeArr.push(randFun)
    }

    // 干扰线
    function line(stark,min1,max1,color1,color2){
        ctx.beginPath()
        let grd = ctx.createLinearGradient(0,0,myCanvas.width,myCanvas.height);
        grd.addColorStop(0,color1);
        grd.addColorStop(1,color2);
        ctx.strokeStyle = grd;
        ctx.moveTo(0,stark);
        function dotRand(min,max){
            return Math.floor(Math.random() * (max - min) + min)
        }
        for(let i = 0; i <=5; i++){
            ctx.lineTo(i * 20,dotRand(min1,max1));
        }
        ctx.stroke();
    }

    // 开始画图
    let starkCanvas = ()=>{
        // 背景色
        ctx.fillStyle = "#999"
        ctx.fillRect(0,0,myCanvas.width,myCanvas.height)

        // 调用写入内容方法，遍历出四个内容
        for(let i = 0;i <= 3;i++){
            setCodeText(randFun(),sizeFun(14,26),i)
        }
        console.log("验证码",codeArr)

        // 调用干扰线
        line(10,8,20,colorRandFun(),colorRandFun())
        line(25,23,35,colorRandFun(),colorRandFun())

        // 把验证码数组转成字符串 
        let getCodeText = codeArr.join("")
        if("用户输入的验证码" == getCodeText.toLocaleLowerCase() || "用户输入的验证码" == getCodeText.toLocaleUpperCase()){
            // 这里写验证成功后逻辑
        }

        // canvas转的图片路径，base64
        function convertCanvasToImage(canvas) {
            let src = null
            src = canvas.toDataURL("image/png");
            return src;
        }
        myImg.src = convertCanvasToImage(myCanvas)    
    }

    // 初始化验证码
    starkCanvas()
    //  点击更换验证码
    myImg.onclick = ()=>{
        codeArr = []
        starkCanvas()
    }
    

</script>