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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
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
模仿OSO的论坛(二)
2006/10/09 PHP
php表单提交问题的解决方法
2011/04/12 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
input的focus方法使用
2010/03/13 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
JAVA代码查错题
2014/10/10 面试题
大型活动策划方案
2014/01/12 职场文书
军训教官感言
2014/03/02 职场文书
向领导表决心的话
2014/03/11 职场文书
《长征》教学反思
2014/04/27 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
婚礼家长致辞
2015/07/27 职场文书
《迟到》教学反思
2016/02/24 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记