js实现canvas简单的验证码

这篇博客介绍了如何利用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>
  • css
 #canvas{
            cursor: pointer;
            /*border: 1px solid red;*/
        }
  • js
 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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值