<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>验证码</title>

    </head>

    <body>

        <canvas id="identify"></canvas>

        <button id="changeCode">看不清，换一个</button>

    </body>

    <script type="text/javascript">

        class IdentifyCode {

            constructor(canvasId, width, height) {

                this.width = width;

                this.height = height;

                this.canvas = document.querySelector(canvasId);

                this.ctx = this.canvas.getContext("2d");

                this.code = "";

                this.codeRange = [];

                this.generateCodeRange();

                this.freshCode();

            }

            //

            initCanvas() {

                this.canvas.width = this.width;

                this.canvas.height = this.height;

            }

            // 生成随机色

            randomColor() {

                var colorStr = "#";

                for(let i = 0; i < 6; i++) {

                    colorStr += Math.floor(Math.random() * 16).toString(16);

                }

                return colorStr;

            }

            // 生成二维码字母范围

            generateCodeRange() {

                var codeRange = [];

                for(let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {

                    codeRange.push(String.fromCharCode(i));

                }

                for(let i = "a".charCodeAt(0); i <= "z".charCodeAt(0); i++) {

                    codeRange.push(String.fromCharCode(i));

                }

                for(let i = "0".charCodeAt(0); i <= "9".charCodeAt(0); i++) {

                    codeRange.push(String.fromCharCode(i));

                }

                this.codeRange = codeRange;

                // return codeRange;

            }

            // 生成四位随机数

            randomCode() {

                this.code = "";

                var len = this.codeRange.length;

                for(let i = 0; i < 4; i++) {

                    this.code += this.codeRange[Math.floor(Math.random() * len)];

                }

            }

            // 画背景色

            drawBackground() {

                var bgColor = "#b0aa93";

                //        console.log(bgColor)

                this.ctx.rect(0, 0, this.width, this.height);

                this.ctx.fillStyle = bgColor;

                this.ctx.fill();

            }

            // 画干扰线

            drawDisturbLines() {

                for(let i = 0; i < 4; i++) {

                    this.drawOneLine();

                }

            }

            drawOneLine() {

                var startX = Math.floor(Math.random() * this.width);

                var startY = Math.floor(Math.random() * this.height);

                var endX = Math.floor(Math.random() * this.width);

                var endY = Math.floor(Math.random() * this.height);

                this.ctx.strokeStyle = this.randomColor();

                this.ctx.lineWidth = Math.ceil(Math.random() * 2);

                this.ctx.beginPath();

                this.ctx.moveTo(startX, startY);

                this.ctx.lineTo(endX, endY);

                this.ctx.closePath();

                this.ctx.stroke();

            }

            // 画干扰点

            drawDisturbDots() {

                for(let i = 0, count = this.width * this.height / 100; i < count; i++) {

                    this.drawOneDot();

                }

            }

            drawOneDot() {

                var ox = Math.floor(Math.random() * this.width);

                var oy = Math.floor(Math.random() * this.height);

                this.ctx.fillStyle = this.randomColor();

                this.ctx.beginPath();

                this.ctx.arc(ox, oy, 1, 0, 2 * Math.PI);

                this.ctx.closePath();

                this.ctx.fill();

            }

            // 画文字(数字或字母)

            drawLetters() {

                for(let i = 0, len = this.code.length; i < len; i++) {

                    let offsetX = this.width * 0.15; // 中间的70%画字母，两边各15%

                    let offsetY = this.height * 0.15;

                    let lineHeight = this.height * 0.7;

                    let x = i * this.width * 0.7 / this.code.length + offsetX;

                    let y = this.height / 2;

                    let letter = this.code[i];

                    let fontSize = Math.min(parseInt(this.height), parseInt(this.width * 0.7));

                    //console.log(fontSize)

                    this.drawOneLetter(letter, x, y, fontSize);

                }

            }

            drawOneLetter(letter, x, y, fontSize) {

                this.ctx.font = fontSize + "px Times new roman";

                this.ctx.textBaseline = "middle";

                this.ctx.fillStyle = this.randomColor();

                this.ctx.fillText(letter, x, y);

            }

            // 更换一个验证码

            freshCode() {

                this.clear();

                this.randomCode();

                //console.log(this.code);

                this.initCanvas();

                this.drawBackground();

                this.drawDisturbLines();

                this.drawDisturbDots();

                this.drawLetters();

            }

            // 清除画布

            clear() {

                this.ctx.clearRect(0, 0, this.width, this.height);

            }

        }

    </script>

    <script type="text/javascript">

        var identifyCode = new IdentifyCode("#identify", 100, 40);

        console.log(identifyCode.code);

        var changeCode = document.querySelector("#changeCode");

        changeCode.onclick = function() {

            identifyCode.freshCode();

            console.log(identifyCode.code);

        }

    </script>

</html>

使用方法：

1. new IdentifyCode("canvas的选择器","canvas的宽","canvas的高");

2. 将用户输入的验证码.toLowerCase()与identifyCode.code.toLowerCase()对比正误。

3. identifyCode.freshCode() 刷新验证码。

js+canvas制作前端验证码的更多相关文章

  1. canvas制作随机验证码

    看到人家彩色背景的验证码想测试一下: 创建html代码: <canvas id="myCanvas" width="200" height="1 ...

  2. JS实现的一个验证码，可以在前端验证后在提交action

    js实现的一个验证码功能,可以在前端判断验证码输入是否正确 输入的邮箱格式是否正确 验证成功后才提交action到后台 <!DOCTYPE html PUBLIC "-//W3C//D ...

  3. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  4. H5上传图片并使用canvas制作海报

    马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...

  5. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  6. Canvas制作的下雨动画

    简介 在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...

  7. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  8. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

  9. canvas实现随机验证码

    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...

随机推荐

  1. 【CodeVS】1083 Cantor表

    1083 Cantor表 1999年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 现代数学的著名证明之 ...

  2. Leetcode617.Merge Two Binary Trees合并二叉树

    给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新的二叉树.合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新值,否则不为 ...

  3. pip安装依赖与生成依赖

    一.安装依赖 从requirements.txt安装依赖库 pip install -r requirements 当提示权限不够时,前面加上sudo#下面就是一个requirements.txt文件 ...

  4. Django项目：CRM(客户关系管理系统)--08--03PerfectCRM创建基本数据03

    如果感觉本章博客对您有帮助,请尽情打赏吧!

  5. SQLServer2005 没有日志文件(*.ldf) 只有数据文件(*.mdf) 恢复数据库的方法

    代码如下: exec sp_attach_db exun,'d:\exun2.mdf' (可能执行一次不能成功,测试了下,有时候需要执行2次以上命令才行) 执行了之后,记得刷新数据库,不然是不会显示的

  6. Spring Boot → 08：嵌入式Servlet容器自定义

    Spring Boot → 08:嵌入式Servlet容器自定义

  7. unity如何查找某个脚本挂在了哪些物体上

    在开发中往往会遇到一个问题:不知道整个场景中究竟有哪些物体挂载了某一个脚本.如果挨个查找太麻烦了,下面有一种方法可以快速找到解决这个问题. 在unity的Window里有一项Editor tests ...

  8. PHP的生成图片或文字水印的类

    ImageWatermark.php <?php /*********************************************************** 类名:ImageWat ...

  9. LDAP Authentication Handler

    Including the Handler In the pom.xml file for your CAS Maven2 WAR Overlay, add the following depende ...

  10. 【转】Jython安装(Win)

    ython的安装比较简单,Jython的安装程序本身就是一个Java应用程序,因此,在安装之前,你必须具备Java运行的环境.下面以 Jython的Jython2.2.1为例,说明Jython的安装步 ...