js+h5 canvas实现图片验证码


Posted in Javascript onOctober 11, 2020

本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下

实现效果

js+h5 canvas实现图片验证码

一、使用技术

原生js技术+html5 canvas画图

利用Math.random()函数随机生成 颜色 字符串  及障碍物

点击 验证码可变更验证码图案

二、使用步骤

1.html+css

代码如下(示例):

<div class="login_code_box">
        <div class="login_code">
         <input type="text" name="login_code" id="login_code" placeholder="请输入验证码">
                
 
        </div>
        <canvas id="canvas" >
 
        </canvas>
     <!-- <img src="" alt="" title="看不清?单击此处刷新" class="login_code_img" > -->
</div>
#canvas{
  width: 130px;
  height: 45px;
  display: inline-block;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  
}

2.js

代码如下(示例):

//验证码生成
let canvas=document.getElementById('canvas')//画布对象
 
let show_num=[]//装验证码的数组
//产生随机颜色
function randomColor(){
  var r= Math.floor( Math.random()*256);
  var g= Math.floor( Math.random()*256);
  var b= Math.floor( Math.random()*256);
  return "rgb("+r+","+g+","+b+") "
}
//画布
function draw(show_num){
  let canvas_clientWidth=document.getElementById('canvas').clientWidth//画布长度
  let canvas_clientHeight=document.getElementById('canvas').clientHeight//画布高度
  let context = canvas.getContext("2d")//画布环境 创建 context 对象:
  canvas.width=canvas_clientWidth
  canvas.height=canvas_clientHeight
  let str="A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
  let astr=str.split(',');//分割字符串形成数组
  let sLength=astr.length;//数组长度
  for (let i = 0; i <= 3; i++) {
    let j=Math.floor(Math.random()*sLength);//随机索引
    let deg=Math.random()*30*Math.PI/180;//0-30随机弧度
    let text=astr[j];//随机字符
    show_num[i]=text//验证码字符数组
    let x=10+i*20//x坐标
    let y=20+Math.random()*8//y坐标
    //位移 旋转角度 颜色 文字 样式开始位置
    context.font='bold 23px 微软雅黑'
    context.translate(x, y);
    context.rotate(deg);
    context.fillStyle = randomColor();
    context.fillText(text,0,0)
    context.rotate(-deg)
    context.translate(-x,-y)
  }
  //验证码显示小点
  for(let i=0;i<=30;i++){
   context.strokeStyle=randomColor()//设置随机色用小点的颜色
   context.beginPath();//开始一条路径
   let m=Math.random()*canvas_clientWidth;
   let n=Math.random()*canvas_clientHeight;
   context.moveTo(m,n)//移动
   context.lineTo(m + 1, n + 1);//添加一个新点,然后在画布中创建从该点到最后指定点的线条
   context.stroke();//画上面定义好的路径
  }
  //验证码显示线条
  for (let i = 0; i < 8; i++) {
    context.strokeStyle=randomColor()
    context.beginPath()
    context.moveTo(Math.random()*canvas_clientWidth,Math.random()*canvas_clientHeight);
    context.lineTo(Math.random()*canvas_clientWidth,Math.random()*canvas_clientHeight)
    context.stroke()
    
  }
 
}
draw(show_num)
console.log(show_num);
 
canvas.onclick=()=>{
draw(show_num)
console.log(show_num);
}

总结

创建canvas画布,利用随机函数,创建随机颜色 。

draw()函数,用于验证码的生成。字符串分隔存入数组

循环遍历生成验证码的个数

给当前字符串一个位移及旋转角度 文字样式等

随机函数生成小点及线段 context.stroke()画好以上定义好的颜色 位移长短的路径,并显示在canvas画布上

点击canvas画布 可重新生成验证码内容

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
理解Javascript的call、apply
Dec 16 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
公众号SVG动画交互实战代码
May 31 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 #Javascript
如何手写简易的 Vue Router
Oct 10 #Javascript
如何手写一个简易的 Vuex
Oct 10 #Javascript
echarts实现晶体球面投影的实例教程
Oct 10 #Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 #Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 #Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 #Javascript
You might like
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python计算导数并绘图的实例
2020/02/29 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
总经理司机岗位职责
2014/02/06 职场文书
库房保管员岗位职责
2014/04/07 职场文书
售后服务承诺书模板
2014/05/21 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
导游词之江南周庄
2019/12/06 职场文书
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL