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

验证码一般用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. MySQL--事务隔离级别RR和RC的异同

    在MySQL中,事务隔离级别RC(read commit)和RR(repeatable read)两种事务隔离级别基于多版本并发控制MVCC(multi-version concurrency con ...

  2. 利用ADO打开Access数据(64位系统)

    64位的access一定要用64的程序才能正确打开,仍然用"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=Test.accdb;Persist ...

  3. MongoDB学习小结

    启动对应server:cd:到mangodb安装根目录下 mongod --dbpath db路径 创建MangoDB服务: mongod.exe --logpath d:/mongodb/logs/ ...

  4. Android 和 iOS 实现录屏推流的方案整理

    一.录屏推流实现的步骤 1. 采集数据 主要是采集屏幕获得视频数据,采集麦克风获得音频数据,如果可以实现的话,我们还可以采集一些应用内置的音频数据. 2. 数据格式转换 主要是将获取到的视频和音频转换 ...

  5. Java的接口、继承与多态

    接口 java只支持单继承,即一个类只能有一个父类,因此需要接口来实现多重继承. 接口的定义 类和接口的区别:一个类通过继承接口的方式,从而来继承接口的抽象方法.类描述对象的属性和方法,接口则包含类要 ...

  6. Go语言标准库之time

    Go语言标准库之time 时间的格式化和解析 格式化 Format Go语言和其他语言的时间格式化的方式不同,Go语言格式化的方式更直观,其他的语言一般是yyyy-mm-dd package main ...

  7. inception安装使用

    一个集审核.执行.备份及生成回滚语句于一身的MySQL自动化运维工具,由去哪网开源 安装 CentOS 7 Python 3.6 安装基础环境 yum -y install cmake libncur ...

  8. SQL查询去掉重复数据

    本文主要总结数据库去掉重复数据的方法 去掉重复数据的方法: 第一种:distinct 根据单个字段去重,能精确去重: 作用在多个字段时,只有当这几个字段的完全相同时,才能去重: 关键字distinct ...

  9. php 对数组按照字符串长度排序

    $file = file('zong.txt'); usort($file, 'sortByLen'); $handle = fopen('zong2.txt', 'a'); foreach ($fi ...

  10. 使用 Portainer UI 管理 Docker 主机

    Docker 使用命令行的方式来管理有时候并没有那么直观,可以使用 Portainer 的 UI 来管理 Docker 主机和 Docker Swarm 集群. 安装 Portainer 环境:cen ...