JavaScript生成随机验证码代码实例


Posted in Javascript onSeptember 28, 2019

利用canvas制作一个随机验证码:

1、clearRect:context.clearRect(x,y,width,height);清空给定矩形内的指定像素

2、fillStyle:设置画笔的颜色

3、rotate(deg):旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 )

4、translate(): 方法重新映射画布上的位置

5、Math.random():获取0-1之间的一个随机数,不包含1

JavaScript生成随机验证码代码实例

<!-- HTML -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>canvas随机验证码</title>
  </head>
  <body>
    <canvas id="canvas" width="100" height="40" style="border: 1px solid red;display: block;margin: 0 auto;"></canvas>
  </body>
  <script type="text/javascript">
    var myCanvas = document.querySelector("#canvas");
    var blur = myCanvas.getContext("2d");
    // 当点击画布时创建一个新的路径
    // 验证码封装
    myCanvas.onclick = function() {
      // 实现点击画布创建一个新的验证码
      blur.clearRect(0,0,100,40);
      verify();
    }
    verify();
    function verify() {
      // 绘制矩形框
      // blur.strokeRect(0,0,100,40);
      // 随机验证码
      var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "s", "t", "u",
        "v", "w", "x", "y", "z", "A", "B", "C", "D", "F", "G", "H", "I", "J", "K", "L", "S", "T", "U", "V", "W", "X", "Y",
        "Z"
      ];
      // 显示四位数的验证码
      for (var i = 0; i < 4; i++) {
        var x = 20 + 20 * i;
        var y = 20 + 10 * Math.random();
        // console.log(x,y);
        // 在数组中获取到随机的索引整数
        var index = Math.floor(Math.random() * arr.length);
        // 通过随机的索引获取到随机的元素
        var texts = arr[index];
        // 设置验证码的相关样式
        blur.font = "bold 20px 微软雅黑";
        blur.fillStyle = textColor();
        // 画布旋转显示
        // translate() 方法重新映射画布上的位置
        blur.translate(x, y);
        // 将画布旋转,旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 )
        var deg = 90 * Math.random() * Math.PI / 180;
        blur.rotate(deg); //
        blur.fillText(texts, 0, 0);
        // 将画布映射返回原来的位置
        blur.rotate(-deg);
        blur.translate(-x, -y);
      }
      
      // 制作验证码的干扰线制作
      for(var i=0;i<6;i++){
        blur.beginPath();
        blur.moveTo(Math.random()*100,Math.random()*40);
        blur.lineTo(Math.random()*100,Math.random()*40);
        // 设置干扰线的颜色
        blur.strokeStyle=textColor();
        blur.stroke();
      }
      // 制作验证码的干扰圆点
      for(var i=0;i<20;i++){
        blur.beginPath();
        var x=Math.random()*100;
        var y=Math.random()*100;
        blur.moveTo(x,y);
        blur.lineTo(x+1,y+1);
        // 设置干扰线的颜色
        blur.strokeStyle=textColor();
        blur.stroke();
      }
    }
    // 获取随机颜色封装
    function textColor(){
      var red=Math.floor(Math.random()*256);
      var green=Math.floor(Math.random()*256);
      var blue=Math.floor(Math.random()*256);
      return "rgb("+red+","+green+","+blue+")";
    }
  </script>
</html>

x 要清除的矩形左上角的 x 坐标
y 要清除的矩形左上角的 y 坐标
width 要清除的矩形的宽度,以像素计
height 要清除的矩形的高度,以像素计

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript检测两个数组是否相似
May 19 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
vue模块移动组件的实现示例
May 20 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 #Javascript
layui时间控件选择时间范围的实现方法
Sep 28 #Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 #Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 #Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 #Javascript
layui的select联动实现代码
Sep 28 #Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 #Javascript
You might like
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
python抽取指定url页面的title方法
2018/05/11 Python
python分数表示方式和写法
2019/06/26 Python
Python API len函数操作过程解析
2020/03/05 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
python批量修改文件名的示例
2020/09/27 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
企业总经理任命书
2014/06/05 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
《迟到》教学反思
2016/02/24 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python
Python如何使用循环结构和分支结构
2022/04/13 Python
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python