如何在 HTML5 中生成验证码
最编程
2024-05-05 08:15:07
...
思路介绍:
可以利用html5的canvas标签先生成画布,然后在画布上利用随机数字生成验证码,背景用随机颜色和杂乱的直线来代替。
(学习视频分享:html5视频教程)
高级方法:
利用表单插件属性绑定验证码数据(json)可以在发送时候或者异步通信进行后台数据获取与检查。
具体代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证码</title> <style type="text/css"> #canvas{ cursor:pointer; } </style> </head> <body> <canvas id="canvas" width="150px" height="50px"></canvas> <script> //生成随机数 function randomNum(min,max){ return Math.floor(Math.random()*(max-min)+min); } //生成随机颜色RGB分量 function randomColor(min,max){ var _r = randomNum(min,max); var _g = randomNum(min,max); var _b = randomNum(min,max); return "rgb("+_r+","+_g+","+_b+")"; } //先阻止画布默认点击发生的行为再执行drawPic()方法 document.getElementById("canvas").onclick = function(e){ e.preventDefault(); drawPic(); }; function drawPic(){ //获取到元素canvas var $canvas = document.getElementById("canvas"); var _str = "0123456789";//设置随机数库 var _picTxt = "";//随机数 var _num = 4;//4个随机数字 var _width = $canvas.width; var _height = $canvas.height; var ctx = $canvas.getContext("2d");//获取 context 对象 ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐 ctx.fillStyle = randomColor(180,240);//填充画布颜色 ctx.fillRect(0,0,_width,_height);//填充矩形--画画 for(var i=0; i<_num; i++){ var x = (_width-10)/_num*i+10; var y = randomNum(_height/2,_height); var deg = randomNum(-45,45); var txt = _str[randomNum(0,_str.length)]; _picTxt += txt;//获取一个随机数 ctx.fillStyle = randomColor(10,100);//填充随机颜色 ctx.font = randomNum(16,40)+"px SimHei";//设置随机数大小,字体为SimHei ctx.translate(x,y);//将当前xy坐标作为原始坐标 ctx.rotate(deg*Math.PI/180);//旋转随机角度 ctx.fillText(txt, 0,0);//绘制填色的文本 ctx.rotate(-deg*Math.PI/180); ctx.translate(-x,-y); } for(var i=0; i<_num; i++){ //定义笔触颜色 ctx.strokeStyle = randomColor(90,180); ctx.beginPath(); //随机划线--4条路径 ctx.moveTo(randomNum(0,_width), randomNum(0,_height)); ctx.lineTo(randomNum(0,_width), randomNum(0,_height)); ctx.stroke(); } for(var i=0; i<_num*10; i++){ ctx.fillStyle = randomColor(0,255); ctx.beginPath(); //随机画原,填充颜色 ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI); ctx.fill(); } return _picTxt;//返回随机数字符串 } drawPic(); </script> </body> </html>
登录后复制
相关推荐:html5教程
以上就是html5如何生成验证码的详细内容,更多请关注php中文网其它相关文章!
推荐阅读
-
如何在 HTML5 中生成验证码
-
如何在 PHP 中实现用户注册时发送手机验证码和短信通知
-
如何在 html5 视频标记中设置视频的宽度和高度
-
如何在 PPT 中快速生成目录页面?
-
旷视天元开源图像比对工具 MegSpot,助力图像算法研发 - 1.多样化图像比对:可提供叠加比对、拖拽比对等多种比对方式,支持缩放、移动等同步操作,并可生成 GIF 保存比对结果。2. 2.专业呈现:支持像素级图像查看、图像直方图、RGB 查看;支持预览亮度、对比度、饱和度、灰度等指标。3. 视频对比:Cognizant Megapixel 可提供多种图像对比方法,如拖放对比等。 3.视频对比:除了支持视屏的所有图像对比功能外,CCTV MegSpot 还支持同步回放、回放暂停和快进、回放速度设置等功能。 4.跨平台支持:CCTV MegSpot 提供对 Mac、Linux 和 Windows 系统的跨平台支持,借助 Electron 框架,可以低成本完成跨平台应用的开发,并保证各平台体验的一致性。 此外,央视网MegSpot支持跨平台自动更新和数据持久化,确保用户体验的连续性,并支持中、英、日三种语言:MegSpot为大尺寸图像文件的对比提供了本地解决方案。 MegSpot 是一种用于比较大型图像文件的本地解决方案。
-
如何在 wps 中快速生成组织结构图?了解如何一键生成
-
如何在 html5 的画布中绘制动画 gif
-
如何在 python 中快速生成列表 python 列表生成
-
TMC5160 步进电机驱动器芯片开发和使用说明-1-1.工作原理 TMC5160 提供三种基本工作模式:模式 1 :全功能运动控制和驱动器 所有步进电机逻辑完全由 TMC5160 控制。模式 2 :脉冲和方向驱动器 外部高性能 S-ramp 运动控制器或 CPU(如 TMC 4361)生成脉冲和方向信号,这些信号与系统中的其他组件(如电机)同步。 TMC5160 控制电流和运动模式,并反馈电机状态。microPlyer 会自动平滑运动。模式 3 :简单步进和方向驱动器 TMC5160 根据步进和方向信号控制电机。无需 CPU; 配置由硬件引脚完成。固定保持电流控制由 TMC 5160 完成。可选反馈信号用作错误检测和同步标志的输出。 SPI_MODE 接地,SD_MOD 为高电平以启用该模式。 1.1 关键概念
-
Java 类加载器的作用 - 简介:类加载器是 Java™ 中一个非常重要的概念。类加载器负责将 Java 类的字节码加载到 Java 虚拟机中。本文首先详细介绍了 Java 类加载器的基本概念,包括代理模型、加载类的具体过程和线程上下文类加载器等。然后介绍了如何开发自己的类加载器,最后介绍了类加载器在 Web 容器和 OSGi™ 中的应用。 类加载器是 Java 语言的一项创新,也是 Java 语言广受欢迎的重要原因之一。它允许将 Java 类动态加载到 Java 虚拟机中并执行。类加载器从 JDK 1.0 开始出现,最初是为了满足 Java Applets 的需求而开发的,Java Applets 需要从远程位置下载 Java 类文件并在浏览器中执行。现在,类加载器已广泛应用于网络容器和 OSGi。一般来说,Java 应用程序的开发人员不需要直接与类加载器交互;Java 虚拟机的默认行为足以应对大多数情况。但是,如果遇到需要与类加载器交互的情况,而您又不太了解类加载器的机制,就很容易花费大量时间调试异常,如 ClassNotFoundException 和 NoClassDefFoundError。本文将详细介绍 Java 的类加载器,帮助读者深入理解 Java 语言中的这一重要概念。下面先介绍一些基本概念。 类加载器的基本概念 顾名思义,类加载器用于将 Java 类加载到 Java 虚拟机中。一般来说,Java 虚拟机以如下方式使用 Java 类:Java 源程序(.java 文件)经 Java 编译器编译后转换为 Java 字节代码(.class 文件)。类加载器负责读取 Java 字节代码并将其转换为 java.lang 实例。每个实例都用来表示一个 Java 类。通过该实例的 newInstance 方法创建该类的对象。实际情况可能更加复杂,例如,Java 字节代码可能是由工具动态生成或通过网络下载的。 基本上,所有类加载器都是 java.lang.ClassLoader 类的实例。下面将详细介绍这个 Java 类。 java.lang.ClassLoader 类简介 java.lang.ClassLoader 类的基本职责是根据给定类的名称为其查找或生成相应的字节码,然后根据这些字节码定义一个 Java 类,即 java.lang.Class 类的实例。除此之外,ClassLoader 还负责加载 Java 应用程序所需的资源,如图像文件和配置文件。不过,本文只讨论它加载类的功能。为了履行加载类的职责,ClassLoader 提供了许多方法,其中比较重要的方法如表 1 所示。下文将详细介绍这些方法。 表 1.与加载类相关的 ClassLoader 方法