js实现canvas简单的验证码

秒速五厘米 2022-02-05 03:13 391阅读 0赞

首先，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][https_codepen.io_iyouu_pen_gJYKwd]

[w3c]: http://www.w3school.com.cn/tags/html_ref_canvas.asp
[https_codepen.io_iyouu_pen_gJYKwd]: https://codepen.io/iyouu/pen/gJYKwd

发表评论取消回复

表情：

评论列表（有 0 条评论，391人围观）

还没有评论，来说两句吧...

相关阅读

相关简单字符验证码的实现

验证码的通用作用就是防止机器（爬虫）大规模的采集数据，防止不法分子通过抓包获取数据来模拟用户操作而产生危害用户的行为等。为满足以上简单需求，首先验证码的字符不能放在`htm

心已赠人/ 2023年07月19日 08:15/ 0 赞/ 33 阅读

相关简单的滑动验证码JS插件图片验证码

简单的滑动验证码JS插件图片验证码 <!DOCTYPE html> <html> <head> <title></title>

小鱼儿/ 2023年02月13日 14:47/ 0 赞/ 126 阅读

相关 jQuery canvas实现随机验证码

[下载地址][Link 1]jQuery和canvas实现的随机验证码，点击可以改变。 ![1631560733.png][] dd: [Link 1]: https:

朴灿烈づ我的快乐病毒、/ 2022年09月13日 01:58/ 0 赞/ 194 阅读

相关 canvas——实现图片验证码(功能实现)

`canvas`实现图片验证码——效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

墨蓝/ 2022年08月31日 15:29/ 0 赞/ 424 阅读

相关 JS 实现验证码

<html> <head> <title>验证码</title> <meta http-eq

淩亂°似流年/ 2022年08月20日 07:24/ 0 赞/ 346 阅读

相关简单验证码的实现

下载[CheckCodeServlet][] jsp页面调用 <script type="text/javascript"> function changeImg

柔情只为你懂/ 2022年06月01日 08:22/ 0 赞/ 294 阅读

相关简单java验证码的实现

简单java验证码的实现验证码效果 ![NWgd3Kv.jpg][] Java方法形式展示 public static String

叁歲伎倆/ 2022年04月18日 04:15/ 0 赞/ 354 阅读

相关验证码的简单实现

1、创建CheckCodeServlet类，生成验证码 @WebServlet("/checkcode") public class Demo6_CheckC

雨点打透心脏的1/2处/ 2022年03月06日 12:54/ 0 赞/ 332 阅读

相关 js实现canvas简单的验证码

首先，canvas：固定在浏览器上的画布，浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持及其属性和

秒速五厘米/ 2022年02月05日 03:13/ 0 赞/ 392 阅读

相关用JS实现简单的图片验证码

用JS实现简单的图片验证码 HTML主要代码如下： ![在这里插入图片描述][20191120122450735.png] JS 代码如下： <scri

怼烎@/ 2021年05月16日 20:36/ 0 赞/ 530 阅读