在通常的登录界面我们都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。

验证码一般用PHP和java等后端语言编写。

但是在前端，用canva或者SVG也可以绘制验证码。

绘制验证码不能是简单的随机字符串，而应该在绘制界面有一些干扰项：

如：干扰线段、干扰圆点、背景等等。

这里的这个demo的canvas验证码干扰项比较简单。

可以在图示中看到本例中的干扰项。

canvas验证码展示效果：

点击实现改变(重绘)验证码：

在控制台运行函数输出返回值(验证码)：

源码 ：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>canvas验证码</title>

 </head>

 <body>

     <canvas width="200" height="60" id="check" style="border:1px solid #000;">您的浏览器不支持canvas标签！</canvas>

     <script>

         var ctx = document.getElementById("check").getContext("2d");

         var ctxW = document.getElementById("check").clientWidth;

         var ctxH = document.getElementById("check").clientHeight;

         /**

          * 产生一个随机数  可设置随机数区间

          * @param  {[Number]} min [随机数区间下限]

          * @param  {[Number]} max [随机数区间上限]

          * @return {[Number]}     [返回一个在此区间的随机数]

          */

         function ranNum(min, max) {

             return Math.random() * (max - min) + min;

         }

         /**

          * 返回一个随机颜色 可设置颜色区间

          * @param  {[Number]} min [颜色下限]

          * @param  {[Number]} max [颜色上限]

          * @return {[String]}     [随机颜色]

          */

         function ranColor(min, max) {

             var r = ranNum(min, max);

             var g = ranNum(min, max);

             var b = ranNum(min, max);

             // return "rgb(" + r + "," + g + "," + b + ")";

             return `rgb(${r},${g},${b})`;

         }

         /**

          * 随机字符串数组

          * @return {[Array]} [随机数组]

          */

         function ranStr() {

             var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";

             return str.split("").sort(function () {

                 return Math.random() - 0.5

             });

         }

         /**

          * 绘制文本字符串

          * @param  {[String]} canvasId [canvas的id]

          * @param  {[Number]} canvasW  [canvas的width]

          * @param  {[Number]} canvasH  [canvas的height]

          * @param  {[Number]} num      [绘制验证码的字数]

          * @param  {[Number]} fsMin    [字体大小下限]

          * @param  {[Number]} fsMax    [字体大小上限]

          * @param  {[Number]} frMin    [字体旋转偏移下限]

          * @param  {[Number]} frMax    [字体旋转偏移上限]

          * @param  {[Number]} min      [颜色下限]

          * @param  {[Number]} max      [颜色上限]

          * @return {[String]} [随机字符串]

          */

         function drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {

             var str = "";

             for (var i = 0; i < num; i++) {

                 var char = ranStr()[Math.floor(0, ranStr().length)];

                 var fs = ranNum(fsMin, fsMax);

                 canvasId.font = fs + "px Verdana";

                 canvasId.fillStyle = ranColor(min, max);

                 // 保存绘制的状态

                 canvasId.save();

                 // context.translate(x,y);

                 // x    添加到水平坐标（x）上的值

                 // y    添加到垂直坐标（y）上的值

                 // 偏移

                 canvasId.translate(canvasW / num * i + canvasW / 20, 0);

                 // 变换角度

                 canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);

                 // context.fillText(text,x,y,maxWidth);

                 // text    规定在画布上输出的文本。

                 // x    开始绘制文本的 x 坐标位置（相对于画布）。

                 // y    开始绘制文本的 y 坐标位置（相对于画布）。

                 // maxWidth    可选。允许的最大文本宽度，以像素计。

                 canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num);

                 // 返回之前保存过的路径状态和属性

                 ctx.restore();

                 str += char;

             }

             // console.log(str);

             return str;

         }

         /**

          * 绘制背景

          * @param  {[String]} canvasId [canvas的id]

          * @param  {[Number]} canvasW  [canvas的width]

          * @param  {[Number]} canvasH  [canvas的height]

          * @param  {[Number]} min      [下限]

          * @param  {[Number]} max      [上限]

          */

         function drawBg(canvasId, canvasW, canvasH, min, max) {

             // 绘制canvas背景

             canvasId.fillStyle = ranColor(min, max);

             // 填充颜色

             canvasId.fillRect(0, 0, canvasW, canvasH);

         }

         /**

          * 绘制干扰 圆点

          * @param  {[String]} canvasId [canvas的id]

          * @param  {[Number]} canvasW  [canvas的width]

          * @param  {[Number]} canvasH  [canvas的height]

          * @param  {[Number]} num      [绘制的数量]

          * @param  {[Number]} r        [圆点半径]

          * @param  {[Number]} min      [下限]

          * @param  {[Number]} max      [上线]

          */

         function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) {

             for (var i = 0; i < num; i++) {

                 // 开始绘制 （拿起笔）

                 canvasId.beginPath();

                 // context.arc(x,y,r,sAngle,eAngle,counterclockwise); （绘制）

                 // x    圆的中心的 x 坐标。

                 // y    圆的中心的 y 坐标。

                 // r    圆的半径。

                 // sAngle    起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

                 // eAngle    结束角，以弧度计。

                 // counterclockwise    可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

                 canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);

                 // 填充颜色

                 canvasId.fillStyle = ranColor(min, max);

                 // 填充

                 canvasId.fill();

                 // 闭合绘制 （放开笔）

                 canvasId.closePath();

             }

         }

         /**

          * 绘制干扰 线段

          * @param  {[String]} canvasId [canvas的id]

          * @param  {[Number]} canvasW  [canvas的width]

          * @param  {[Number]} canvasH  [canvas的height]

          * @param  {[Number]} num      [绘制的数量]

          * @param  {[Number]} min      [下限]

          * @param  {[Number]} max      [上线]

          */

         function drawLine(canvasId, canvasW, canvasH, num, min, max) {

             for (var i = 0; i < num; i++) {

                 // 开始绘制 （拿起笔）

                 canvasId.beginPath();

                 // 绘制开始点

                 canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));

                 // 绘制结束点

                 canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));

                 canvasId.strokeStyle = ranColor(min, max);

                 canvasId.stroke();

                 canvasId.closePath();

             }

         }

         // 绘制验证码

         function drawCanvas() {

             // 清空canvas

             ctx.clearRect(0, 0, 200, 60);

             // 绘制背景

             drawBg(ctx, ctxW, ctxH, 200, 255);

             // 绘制干扰圆点

             drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);

             // 绘制干扰线段

             drawLine(ctx, ctxW, ctxH, 20, 0, 255);

             // 绘制验证码

             var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);

             return str;

         }

         drawCanvas();

         document.getElementById('check').onclick = drawCanvas;

     </script>

 </body>

 </html>

canvas实现验证码的更多相关文章

  1. 用canvas绘制验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...

  2. android 开发 View _12_ 用Canvas 绘制一张图片（博客中演示用Canvas画验证码图片）

    package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; impo ...

  3. canvas实现验证码功能

    我们在做一些后台系统登录功能的时候,一般都会用到验证码,最多的就是后台生成的验证码图片返回给前端的.也可以不调用后端接口,前端使用canvas直接生成验证码. 由于功能过于简单,不需要多少代码和文字说 ...

  4. canvas 绘制验证码

    注意: 真正项目中验证码图片都是由服务器端(PHP.JSP.Node.js)技术来生成. 最终效果: 代码: <!DOCTYPE html> <html> <head l ...

  5. canvas绘制验证码

    css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> body中添加标签 ...

  6. captcha.js一个生成验证码的插件，使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  7. Android下实现手机验证码

    Android实现验证码 效果图 Github地址 地址:https://github.com/kongqw/Android-CheckView 使用 <kong.qingwei.demo.kq ...

  8. JavaScript随机验证码

    利用canvas制作一个随机验证码: 1.clearRect:context.clearRect(x,y,width,height);清空给定矩形内的指定像素 2.fillStyle:设置画笔的颜色 ...

  9. android 开发 View _1_ View的子类们 和 视图坐标系图

    目录: android 开发 View _2_ View的属性动画ObjectAnimator ,动画效果一览 android 开发 View _3_ View的属性动画ValueAnimator a ...

随机推荐

  1. Thinking in Java Chapter 14

    From Thinking in Java 4th Edition RTTI(Run-Time Type Information),运行时类型信息,使得你可以在程序运行时发现和使用类型信息.对RTTI ...

  2. Android开发 - 掌握ConstraintLayout（四）创建基本约束

    上一篇我们介绍了编辑器的基本使用,本文我们介绍创建基本的约束. "约束"表示View之间的位置关系.当我们在ConstraintLayout布局中创建View时,如果我们没有添加任 ...

  3. Spark架构

    Spark架构    为了更好地理解调度,我们先来鸟瞰一下集群模式下的Spark程序运行架构图. 1. Driver Program        用户编写的Spark程序称为Driver Progr ...

  4. 2-4 完整Todolist案例

    在2-3 的基础上继续,综合前面的Todolist编写一个完整的案例,实现基本的输入内容,添加内容,点击删除内容 稍微讲解54行代码 splice()的用法

  5. 【LeetCode】7. 整数反转

    题目 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1:输入: 123 输出: 321  示例 2:输入: -123 输出: -321 示例 3:输入: 120 输出 ...

  6. Python：SQLMap源码精读—start函数

    源代码 def start(): """ This function calls a function that performs checks on both URL ...

  7. 移动端 h5开发相关内容总结(三)

    之前写过两篇开发中遇到的问题和解决方案.当时是CSS 和 JavaScript 分开写的.现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开. 给大家分享一下这半年来的感受吧: 知道和理解 ...

  8. Mongoose基础

    为了保存网站的用户数据和业务数据,通常需要一个**数据库**.**MongoDB**和**Node.js**特别般配,因为MongoDB是基于文档的非关系型数据库,文档是按BSON(JSON的轻量化二 ...

  9. 从零开始学 Web 之 CSS3（五）transform

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  10. Spring Cloud Consul使用——配置中心

    1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...