js实现canvas简单的验证码

最新推荐文章于 2025-06-20 09:30:41 发布

喵姑娘呀

最新推荐文章于 2025-06-20 09:30:41 发布

阅读量927

点赞数 5

CC 4.0 BY-SA版权

分类专栏： demo 文章标签： canvas验证码 JavaScript实现canvas验证码验证码

本文链接：https://blog.youkuaiyun.com/weixin_43389331/article/details/89815196

demo 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何利用HTML5的canvas标签在浏览器上创建简单的验证码。首先讲解了canvas的基本概念，指出它在现代浏览器中的支持情况。接着，提到了在实现验证码前需要了解的canvas相关API，如fillStyle、strokeStyle、fillRect、stroke、moveTo、lineTo和arc等。还提到了通过设置font属性来调整文本样式。最后，提供了代码实例的链接供读者参考和查看效果。

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

首先，canvas：固定在浏览器上的画布，浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持及其属性和方法。
canvas为我们敞开了新一扇大门。
属于HTML5中新增的一个标签，看起来与其他标签区别不大，在验证码之前，应该学习canvas相关API，
这里介绍本次用到的canvas方法：
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
fillRect() 绘制“被填充”的矩形
stroke() 绘制已定义的路径
moveTo() 把路径移动到画布中的指定点，不创建线条
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
arc() 创建弧/曲线（用于创建圆形或部分圆）
font 设置或返回文本内容的当前字体属性
更多请参考w3c文档w3c

html

<canvas id="canvas" width="120" height="30"></canvas>

 #canvas{
            cursor: pointer;
            /*border: 1px solid red;*/
        }

 var canvas = document.querySelector("#canvas");
    console.log(canvas);
    var cxt = canvas.getContext('2d');//绘图上下文环境

    //绘制验证码图片
    draw();
    canvas.onclick = function(){
        // console.log('1');
        draw();
    };
    function draw(){
//   绘制一个颜色随机的矩形
        cxt.beginPath();
        cxt.fillStyle = randColor(170,250);//把颜色放到一个方法
        cxt.fillRect(0,0,120,30);
        cxt.closePath();
        var data = 'abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ0123456789';
        for(var i = 0; i <= 90; i +=30){//四位验证码
            var c = data[randNum(0,data.length - 1)];
            cxt.beginPath();
            cxt.fillStyle = randColor(60,160);
            cxt.font = randNum(15,40) + 'px SimHei';
            cxt.fillText(c, i + randNum(0,15),randNum(15,30));//[0,15) [30,45) [60,75) [90,115)
            cxt.closePath();
        }
        //渲染干扰线
        for(var j = 0; j < 10; j ++){
            cxt.beginPath();
            cxt.moveTo(randNum(0,120), randNum(0,120));//这里的randNum(min,max)与canvas的画板宽高相联系，
            cxt.lineTo(randNum(0,120), randNum(0,120));
            cxt.strokeStyle = randColor(60,120);
            cxt.stroke();
        }
        for(var i = 0; i < 10; i ++){
            cxt.beginPath();
            cxt.strokeStyle = randColor(50,130);
            cxt.arc(randNum(0,120),randNum(0,30),randNum(1,3),0,2*Math.PI);
            cxt.stroke();
            cxt.closePath();
        }
    }
    function randColor(min,max){//max+1是取不到的，但是max是可以取到的，所以向下取整刚好取到[min,max]。
        var r = Math.floor(Math.random()*(max-min + 1)+min);//Math.random * （max- min)==>[o,min)变成[min,max-min]的范围
        var g =  Math.floor(Math.random()*(max-min + 1)+min);
        var b =  Math.floor(Math.random()*(max-min + 1)+min);
        return 'rgb('+r+','+g+','+b+')';
    }

    function randNum(min,max){
        var num = Math.floor(Math.random()*(max-min + 1)+min);
        return num;
        console.log(num);
    }

效果链接请点击：https://codepen.io/iyouu/pen/gJYKwd