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 相关文章推荐
js中eval详解
Mar 30 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
Python 的 Socket 编程
2015/03/24 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Django实现内容缓存实例方法
2020/06/30 Python
Django中使用Celery的方法步骤
2020/12/07 Python
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
思想品德自我评价
2014/02/04 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
学生手册评语
2014/05/05 职场文书
个人求职自荐信范文
2014/06/20 职场文书
化工实习心得体会
2014/09/09 职场文书
夫妻吵架保证书
2015/05/08 职场文书
春风化雨观后感
2015/06/11 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
Redis性能监控的实现
2021/07/09 Redis