使用canvas及js简单生成验证码方法
在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是:1.生成一张画布canvas 2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证码
结构与样式:
<canvas id="mycanvas" width='90' height='40'>
您的浏览器不支持canvas,请换个浏览器试试~
</canvas>
<style>
#mycanvas{
cursor: pointer;
}
</style>
下面来编写js代码:
/*生成4位随机数*/
function rand(){
var str="abcdefghijklmnopqrstuvwxyz0123456789";
var arr=str.split("");
var validate="";
var ranNum;
for(var i=0;i<4;i++){
ranNum=Math.floor(Math.random()*36); //随机数在[0,35]之间
validate+=arr[ranNum];
}
return validate;
} /*干扰线的随机x坐标值*/
function lineX(){
var ranLineX=Math.floor(Math.random()*90);
return ranLineX;
} /*干扰线的随机y坐标值*/
function lineY(){
var ranLineY=Math.floor(Math.random()*40);
return ranLineY;
} function clickChange(){
var mycanvas=document.getElementById('mycanvas');
var cxt=mycanvas.getContext('2d');
cxt.fillStyle='#000';
cxt.fillRect(0,0,90,40); /*生成干扰线20条*/
for(var j=0;j<20;j++){
cxt.strokeStyle='#fff';
cxt.beginPath(); //若省略beginPath,则每点击一次验证码会累积干扰线的条数
cxt.moveTo(lineX(),lineY());
cxt.lineTo(lineX(),lineY());
cxt.lineWidth=0.5;
cxt.closePath();
cxt.stroke();
} cxt.fillStyle='red';
cxt.font='bold 20px Arial';
cxt.fillText(rand(),25,25); //把rand()生成的随机数文本填充到canvas中
} clickChange(); /*点击验证码更换*/
mycanvas.onclick=function(e){
e.preventDefault(); //阻止鼠标点击发生默认的行为
clickChange();
};
这样就写好一个较普通的验证码了,当然也有很多需要优化的地方,比如干扰线的随机颜色、可以加干扰点以及文本的随机位置随机颜色等等。赶紧去试试吧~
使用canvas及js简单生成验证码方法的更多相关文章
- captcha.js一个生成验证码的插件,使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
- js随机生成验证码以及随机颜色
Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...
- js随机生成验证码及其颜色
今天迎来了2018年第一场雪,这个美好的日子,总的写点什么纪念一下,在这里写了一个在js中使用Math.random()函数,随机生成四位数的验证码及其验证码换颜色. js代码如下: var arra ...
- .Net (MVC) 随机生成验证码
以前一直对C#的GDI画图部分知识点不怎么用所以忘得差不多了,这两天正好公司要做一个博客系统,其中一个需求就是留言时为了防止恶意攻击必须填写验证码,正好借着这个机会复习了一下,以下是实现代码,写的比较 ...
- Jquery 客户端生成验证码
验证码的作用: 1.有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的方式(比如招商银行的网上个人银行,腾讯的QQ社区),我们利用比较简 ...
- Springboot 生成验证码
技术:springboot+kaptcha+session 概述 场景介绍 验证码,用于web网站.用户点击验证码图片后,生成验证码.提交后,用户输入验证码和Session验证码,进行校验. 详细 ...
- 用java Graphics生成验证码
以下下是API文档对Graphics的介绍! Graphics 类是所有图形上下文的抽象基类,允许应用程序在组件(已经在各种设备上实现)以及闭屏图像上进行绘制. Graphics 对象封装了 Java ...
- JS简单入门教程
JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...
- captcha ~ 生成验证码图片
验证码在我们的世界中可以保护我们的信息安全的一个保障之一 这就是生成验证码的代码 # 导报 from captcha.image import ImageCaptcha #验证码的包 from ...
随机推荐
- Vue-think脚手架
准备重构的项目,原来的后台是thinkPHP写的,刚刚摸VUE,不知道里面数据调用原理,想先安装vuethink学习一下. 结果安装半天,npm run dev的时候报错,尝试了很多方法,各种重装,看 ...
- Hadoop文章
hadoop入门--简单的MapReduce案例:https://blog.csdn.net/zhangt85/article/details/42077281?utm_source=blogxgwz ...
- 8、C++指针和自由存储空间
8.C++指针和自由存储空间 计算机程序在存储数据时必须跟踪3中基本属性. 信息存储在何处 存储的值为多少 存储信息是什么类型. 指针是 一个变量,其存储的是值得内存地址 对于常规变量的地址,只需要对 ...
- SQl 根据某列去重 partition by
主键为ID select * from [infotops] where Id in (select max(id) from [infotops] group by InfoId) -------- ...
- Jenkins 更换国内源
jenkins插件清华大学镜像地址https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json1更换地址方法1.进入j ...
- P4174 [NOI2006]最大获利
传送门 把用户群和中转站都看成点 用户群权值为正,中转站权值为负 为了获得用户群的权值,我们不得不一起获得中转站负的权值 发现就是裸的最大权闭合子图 那么从用户群连边向中转站,边值INF 从 S 连向 ...
- webpack 4.0 安装出现的小问题 (One CLI for webpack must be installed)
安装的webpack版本是4.11.0,运行命令npm start 提示:One CLI for webpack must be installed. These are recommended ch ...
- ZOJ - 1108 输出DP方案
DP方程太水不解释 熟悉一下输出的套路 #include<iostream> #include<algorithm> #include<cstdio> #inclu ...
- Oracle权限关于with admin option和with grant option的用法
1.with admin option with admin option的意思是被授予该权限的用户有权将某个权限(如create any table)授予其他用户或角色,取消是不级联的. 如授予A系 ...
- PIE SDK热力图
1.算法功能简介 热力图,也就热图或者热点图,它能以特殊高亮的的形式显示某一区域的等级的优越性.重要性或者某一区域类别的密度和变换趋势:例如百度地图热力图 是用不同颜色的区块叠加在地图上实时描述人 ...