使用canvas及js简单生成验证码方法
2017-04-02 17:03
896 查看
在很多时候都需要用到验证码,前端验证码需要知道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(); };
这样就写好一个较普通的验证码了,当然也有很多需要优化的地方,比如干扰线的随机颜色、可以加干扰点以及文本的随机位置随机颜色等等。赶紧去试试吧~
您可能感兴趣的文章:
相关文章推荐
- jsp生成html(方法简单,只用使用一个serlvet)
- swfobject.js 2.2简单使用方法
- php 验证码生成方法 及使用
- js+html5实现canvas绘制简单矩形的方法
- IE下使用excanvas.js之后动态创建的canvas不支持getContext的解决方法(转)
- 使用jxl,Servlet,JSP 动态生成excel文件并提示下载的简单方法
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建输出验证码图片的控制器
- Yii——使用CHtml::link()等方法时,设置htmlOptions属性可快速生成js代码和ajax请求
- 使用js清空html表格的简单方法
- js使用DOM操作实现简单留言板的方法
- 验证码生成程序与使用方法
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建输出验证码图片的控制器
- 在Coldfusion 8 中,CFImage集成了智能的生成验证码功能,使用简单,效果还不错!
- swfobject.js 2.2简单使用方法
- jsp生成html(方法简单,只用使用一个serlvet)
- jsp生成html(方法简单,只用使用一个serlvet)
- swfobject.js 2.2简单使用方法
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建输出验证码图片的控制器
- 4种方法生成二维码 (js 控制canvas 画出 二维码)
- PD 15.1 安装 破解 , 简单使用 (一对多,多对多关系生成sql脚本) , CDM 和 PDM 的区别;PD15.1 生成sql2008 无FK外键约束的解决方法