19.2.23 canvas 实现验证码效果

于 2019-02-23 21:32:22 发布
阅读量146 收藏
点赞数
分类专栏： 前端效果整理 文章标签： canvas 验证码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wl_heike/article/details/87897500
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #canvas{
            background-color: grey;
            /*把行级元素改为块级元素显示*/
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
 
      <canvas id="canvas" width="200px" height="50px"></canvas>
      <script type="text/javascript">
          var canvas=document.getElementById("canvas");
          //获取绘画环境（为画板添加画布）
          var cv=canvas.getContext("2d");
          //定义一个数组存储26个字母
          var words='QWERTYUIOPPASDFGHJKLZXCVBNM';
          //定义字体
          cv.font='30px arial';
          for(var i=0;i<4;i++){
              //取0-25随机数
              var w=Math.floor(Math.random()*(25-0+1)+0);
              //获取随机位置
              var l=Math.floor(Math.random()*((50*i+30)-50*i+1)+50*i);
              var t=Math.floor(Math.random()*(35-25+1)+25);
              //获取随机颜色(0-255)
              var a=Math.floor(Math.random()*(255-0+1)+0);
              var b=Math.floor(Math.random()*(255-0+1)+0);
              var c=Math.floor(Math.random()*(255-0+1)+0);
              //颜色样式
              cv.fillStyle='rgb('+a+','+b+','+c+')';
              //设置倾斜角度(-3°到3°)
              var du=Math.floor(Math.random()*(3-(-3)+1)-3);
              cv.rotate(du*Math.PI/180);
              //填充字体
              cv.fillText(words[w],l,t);
              
          }
          
          
          
      </script>
</body>
</html>

wl_wj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript Canvas实现验证码
10-18
在实际项目中，还可以进一步优化验证码的复杂性和安全性，例如增加更多类型的干扰元素、使用更复杂的字符集、实现动画效果等。同时，为了兼容不支持Canvas的浏览器，可以考虑结合其他技术（如图片验证码）作为备选...
暑假第四周canvas画布画验证码
qq_63660369的博客
07-03 327
canvas画布标签是在html中建立一个类似于画板的标签，在上面可以任意绘制内容，canvas标签常伴随js同时使用，可以让canvas标签有更大的用处，比如验证码，小图标甚至小游戏。（代码在后面）canvas画布中有许多方法，这里介绍几种在绘制验证码时常用的方法1.“canvas对象名”.getContext("2d")首先要用js绘制画布时在得到该canvas元素后，还不能直接使用，还要用 后才能以这个新的对象使用canvas的各种方法2.fillText()在画布上添加文字fillText(te
js+canvas实现验证码功能
10-18
在本文中，我们将深入探讨如何使用JavaScript和HTML5的Canvas API来实现一个自定义的验证码功能。验证码是一种用于验证用户身份的安全机制，通常用于防止自动化程序（如机器人）进行恶意操作。通过Canvas，我们可以...
原生js+canvas实现验证码
01-22
本文实例为大家分享了js+canvas实现验证码的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title...
这演示的叫啥数学模型来着，似曾很熟
最新发布
07-25
这演示的叫啥数学模型来着，似曾很熟
b131学生成绩分析和弱项辅助系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-25
学生成绩分析和弱项辅助系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现学生成绩分析和弱项辅助系统的功能。其中管理员管理用户，新闻公告。 学生成绩分析和弱项辅助系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，学生成绩分析和弱项辅助系统都可以轻松应对。 学生信息管理页面，此页面提供给管理员的功能有：学生信息的查询管理，可以删除学生信息、修改学生信息、新增学生信息，还进行了对用户名称的模糊查询的条件。教师信息管理页面，此页面提供给管理员的功能有：查看已发布的教师信息数据，修改教师信息，教师信息作废，即可删除，还进行了对教师信息名称的模糊查询 教师信息信息的类型查询等等一些条件。试卷信息管理页面，此页面提供给管理员的功能有：根据试卷信息进行条件查询，还可以对试卷信息进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
vue2之jessibuca视频插件使用教程之字体文件
07-25
vue2之jessibuca视频插件使用教程之字体文件
b126小型医院医疗设备管理系统-springboot+vue.zip（可运行源码+sql文件+文档）
07-25
小型医院医疗设备管理系统在Eclipse环境中，使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务 总之，小型医院医疗设备管理系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。 职员信息管理页面，此页面提供给管理员的功能有：职员信息的查询管理，可以删除职员信息、修改职员信息、新增职员信息，还进行了对用户名称的模糊查询的条件。设备信息管理页面，此页面提供给管理员的功能有：查看已发布的设备信息数据，修改设备信息，设备信息作废，即可删除，还进行了对设备信息名称的模糊查询 设备信息信息的类型查询等等一些条件。库房信息管理页面，此页面提供给管理员的功能有：根据库房信息进行条件查询，还可以对库房信息进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
Matlab实现布谷鸟优化算法CS-TCN-Multihead-Attention多输入单输出回归预测算法研究.rar
07-25
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
b153校园失物招领系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-25
校园失物招领系统管理系统按照操作主体分为管理员和用户。管理员的功能包括字典管理、论坛管理、公告信息管理、失物招领管理、失物认领管理、寻物启示管理、寻物认领管理、用户管理、管理员管理。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。 校园失物招领系统管理系统可以提高校园失物招领系统信息管理问题的解决效率，优化校园失物招领系统信息处理流程，保证校园失物招领系统信息数据的安全，它是一个非常可靠，非常安全的应用程序。 ，管理员权限操作的功能包括管理公告，管理校园失物招领系统信息，包括失物招领管理，培训管理，寻物启事管理，薪资管理等，可以管理公告。 失物招领管理界面，管理员在失物招领管理界面中可以对界面中显示，可以对失物招领信息的失物招领状态进行查看，可以添加新的失物招领信息等。寻物启事管理界面，管理员在寻物启事管理界面中查看寻物启事种类信息，寻物启事描述信息，新增寻物启事信息等。公告管理界面，管理员在公告管理界面中新增公告，可以删除公告。公告类型管理界面，管理员在公告类型管理界面查看公告的工作状态，可以对公告的数据进行导出，可以添加新公告的信息，可以编辑公告信息，删除公告信息。
《AI大模型应用》--调用文心一言绘图api.zip
07-25
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
pads视频教程资料15.zip
07-25
pads视频教程资料15.zip
JAVA基于J2ME的手机游戏开发(论文+报告).zip
07-25
JAVA基于J2ME的手机游戏开发(论文+报告)，包含全量功能源码、部分截图，及相关文档说明，供大家学习使用！
一维、二维插值模型Python代码.txt
07-25
数学建模模型python实例。
开题报告传统糕点 已通过开题答辩的.docx
07-25
理论意义： 1、网页设计是信息传播的重要手段，通过合理的布局、图文搭配等设计元素，可以更好地传递传统糕点的信息。理论上，这涉及到传播学、信息传递模型等方面的理论研究，确保信息能够被受众准确、清晰地接收。 2、用户体验理论强调用户与网页之间的交互和感知。在传统糕点推广网页设计中，理论上的考虑应该包括用户友好的界面、易于导航的网站结构，以及引导用户深入了解传统糕点的设计元素。
WSL Ubuntu20.04虚拟机
07-25
WSL（Windows Subsystem for Linux）是微软为Windows 10及更高版本引入的一项功能，它允许用户在不需要传统虚拟机或双启动设置的情况下，直接在Windows上运行Linux环境。Ubuntu 20.04 LTS（长期支持版）是其中一个非常受欢迎的Linux发行版，与WSL结合使用时，可以为用户提供接近原生的Linux体验。主要特点与优势 无缝集成：WSL Ubuntu 20.04与Windows系统无缝集成，可以直接访问Windows的文件系统、网络资源和剪贴板等，使得在Windows和Linux之间切换变得非常便捷。 轻量级：与传统的虚拟机相比，WSL更加轻量级，因为它不需要模拟完整的硬件环境，因此占用的系统资源更少，启动速度更快。 性能优越：特别是WSL 2版本，它基于Hyper-V虚拟化技术，支持Linux子系统直接访问硬件资源，显著提高了文件系统性能和网络性能。 丰富的软件包：Ubuntu 20.04 LTS提供了丰富的软件包，包括最新的GNU/Linux工具、实用程序和应用程序，可以满足大多数开发者和用户的需求。
海信收款机HK360整机驱动（KB78键盘等）
07-25
海信收款机HK360整机驱动（KB78键盘等）
物联网技术资源（传感器，通信、数据处理存储、安全、设备、云计算
07-25
物联网（Internet of Things, IoT）是一个庞大的技术生态系统，它集成了各种技术来实现物理世界与数字世界的无缝连接。以下是物联网技术资源的主要组成部分，包括传感器、通信、数据处理与存储、安全、设备以及云计算的概述： 传感器： 传感器是物联网的感知层，负责收集物理世界中的信息。这些传感器可以测量温度、湿度、压力、光强度、声音、加速度、位置等多种参数。 常见的传感器类型包括温度传感器、湿度传感器、光敏传感器、加速度计、陀螺仪、RFID标签、GPS模块等。 通信： 物联网设备之间以及设备与云端之间的通信是关键。通信技术包括有线（如以太网、USB、串口等）和无线（如Wi-Fi、蓝牙、Zigbee、LoRa、NB-IoT、Sigfox、5G等）。 无线通信技术根据传输距离、功耗、带宽等特性，适用于不同的物联网应用场景。 数据处理与存储： 物联网生成的海量数据需要经过处理才能转化为有价值的信息。数据处理技术包括数据清洗、转换、压缩、加密等。 存储技术包括本地存储（如SD卡、闪存）和云端存储（利用云服务平台进行数据存储和管理）。云端存储提供了可扩展性、可靠性和数据备份的优势。 安
毕业设计javajsp仓库管理系统mysql-qkrp源码含文档工具包
07-25
毕业设计javajsp仓库管理系统mysql-qkrp源码含文档工具包 页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 本文所设计的仓库管理系统以标准的仓库管理模式为基础，基于JSP、Struts2和java开发出一个可以用于一般单位的仓库管理系统，实现了仓库管理的高效性与安全性。系统主要提供一个仓库业务及其作业管理的信息存储和检索系统。通过入库管理、出库管理、仓库人员管理等功能模块来实现仓库的综合管理。 包含：源码、数据库脚本、论文、答辩ppt、环境工具包、相同框架项目的安装教程（在说明文档中）
用canvas实现验证码
04-14
好的，关于使用canvas实现验证码，我可以给您一些基本的思路和代码。首先，您需要在HTML中创建一个canvas元素，并设置它的宽度和高度。然后使用JavaScript代码，在canvas上绘制随机的数字或字母，并将其转化为图片形式。最后，将这张图片作为验证码展示给用户，用户需要在提交表单时输入正确的验证码才能通过验证。 以下是基本的代码示例： HTML: ```html <canvas id="captcha" width="120" height="40"></canvas> ``` JavaScript: ```javascript var canvas = document.getElementById('captcha'); var ctx = canvas.getContext('2d'); //生成随机的验证码字符串 var captcha = ''; for (var i = 0; i < 4; i++) { captcha += String.fromCharCode(Math.floor(Math.random() * 26) + 65); } //绘制验证码字符串 ctx.font = 'bold 30px Arial'; ctx.fillText(captcha, 10, 35); //绘制干扰线 for (var i = 0; i < 10; i++) { ctx.strokeStyle = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')'; ctx.beginPath(); ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); ctx.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); ctx.stroke(); } //将验证码转化为图片形式 var captchaImg = canvas.toDataURL(); ``` 以上代码仅提供基本思路和示例，具体实现方式可以根据需求不同做出进一步的调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值