前端利用canvas画布生成验证码

最新推荐文章于 2025-07-02 19:05:13 发布

原创最新推荐文章于 2025-07-02 19:05:13 发布 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#canvas生成验证码 #验证码 #前端生成验证码 #canvas画布生成验证码 #验证码前端生成方法

前端-基础问题专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas和JavaScript实现的随机验证码图片生成方法。该方法通过随机生成RGB颜色值来改变字体颜色，并通过旋转和移动坐标原点的方式使验证码字符倾斜显示，增加了验证码的复杂度。此外还加入了干扰线和干扰点来进一步提高验证码的安全性。

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

直接贴代码
js部分

function randomRgbColor() { //随机生成RGB颜色
            var r = Math.floor(Math.random() * 256); //随机生成256以内r值
            var g = Math.floor(Math.random() * 256); //随机生成256以内g值
            var b = Math.floor(Math.random() * 256); //随机生成256以内b值
            return "rgb(" + r + "," + g + "," + b + ")"; //返回rgb(r,g,b)格式颜色
        }
        window.onload = function () {
            draw();
            document.getElementById("changeImg").onclick=function(){
                draw();
            }
        }

        function draw(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            canvas.width = 120;
            canvas.height = 40;
            context.strokeRect(0, 0, 120, 40);
            var aCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,1,2,3,4,5,6,7,8,9";
            console.log(aCode.split(","));
            var aLength = aCode.split(",").length;
            for (var i = 0; i <= 3; i++) {
                var x = 20 + i * 20;
                var y = 20 + Math.random() * 10;
                var j = Math.floor(Math.random() * aLength);
                var deg = Math.random() * 90 * Math.PI / 180;//随机弧度
                var txt = aCode.split(",")[j];
                context.fillStyle = randomRgbColor();
                context.font = "bold 20px 微软雅黑";
                //修改坐标原点和旋转角度
                context.translate(x, y);
                context.rotate(deg);
                context.fillText(txt, 0, 0);
                //恢复坐标原点和旋转角度
                context.rotate(-deg);
                context.translate(-x, -y);
            }
            //干扰线
            for (var i = 0; i < 8; i++) {
                context.strokeStyle = randomRgbColor();
                context.beginPath();
                context.moveTo(Math.random() * 120, Math.random() * 40);
                context.lineTo(Math.random() * 120, Math.random() * 40);
                context.stroke();
            }
            /**绘制干扰点**/
            for (var i = 0; i < 20; i++) {
                context.fillStyle = randomRgbColor();
                context.beginPath();
                context.arc(Math.random() * 120, Math.random() * 40, 1, 0, 2 * Math.PI);
                context.fill();
            }
        }

html部分

 <canvas id="canvas"></canvas>
 <a href="javascript:;" id="changeImg">再换一张</a>

不知道为什么不能上传图片了，请自行测试。