js实现canvas简单的验证码

秒速五厘米 2022-02-05 03:13 272阅读 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 条评论，272人围观）

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

相关阅读

相关 jQuery canvas实现随机验证码

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

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

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

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

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

相关 JS 实现验证码

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

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

相关简单验证码的实现

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

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

相关简单java验证码的实现

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

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

相关 JS实现随机数验证码

转载改进版: <html> <head> <meta charset="utf-8"> <title></title>

骑猪看日落/ 2022年04月11日 12:10/ 0 赞/ 344 阅读

相关 JS实现随机验证码

验证码验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，一般都是后台返回的，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的

待我称王封你为后i/ 2022年03月29日 09:41/ 0 赞/ 422 阅读

相关验证码的简单实现

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

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

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

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

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

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

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

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