原生js+canvas实现验证码


Posted in Javascript onNovember 29, 2020

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

效果展示:

原生js+canvas实现验证码

源码展示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<style>
 
  canvas {
    border: 1px solid #000;
    vertical-align: bottom;
  }
 
  input {
    padding: 0;
    width: 120px;
    height: 30px;
    vertical-align: bottom;
    border: 1px solid #000;
  }
 
</style>
 
 
<input type="text" name="textContent" placeholder="输入">
<canvas id="can" width="120" height="30"></canvas>
<button>提交</button>
 
 
<script>
 
 
  /*1、背景颜色时随机的
 * 2、其中的内容是随机的
 * 3、内容的颜色 随机的
 * 4、每个字的旋转度数随机的
 * 5、文本的大小随机的
 * 6、干扰线的位置随机的
 * 7、干扰线的颜色随机的
 * 8、干扰点
 * */
 
  var btn = document.querySelector("button");
  var can = document.querySelector("canvas");
  var ctx = can.getContext("2d");
 
  var text = "0123456789abcdefghijklmnopqrstuvwsyzABCDEFGHIGKLMNOPQRSTUVWSYZ";
 
 
  //设置4个内容 将canvas 平分成4分 然后让内容在1/4的空间旋转缩放
  //原理 :每次都是位移旋转之后再回复原位
  for (var i = 0; i < 4; i++) {
    var txt = text[randNum(0,text.length-1)];
 
    ctx.fillStyle = getRandColor(80,150);
    ctx.font=randNum(12,25)+"px '宋体'";
    ctx.textBaseline = "top";
    var x = randNum(0,10);
 
    var deg = randNum(-30,30);
 
    ctx.translate(x+30*i,0);
    ctx.rotate(Math.PI/180*deg);
    ctx.fillText(txt,0,0);
    ctx.rotate(Math.PI/180*-deg);
    ctx.translate(-(x+30*i),0);
 
  }
 
 
  /*干扰点*/
  for(var i=0;i<30;i++){
    ctx.beginPath();
    ctx.arc(randNum(0,120),randNum(0,30),1,0,Math.PI*2);
    ctx.fillStyle=getRandColor(150,180);
    ctx.fill();
  }

 
  /*干扰线*/
  for(var i=0;i<4;i++){
    ctx.beginPath();
    ctx.moveTo(randNum(0,120),randNum(0,30));
    ctx.lineTo(randNum(0,120),randNum(0,30));
    ctx.strokeStyle=getRandColor(150,180);
    ctx.lineWidth= randNum(1,2);
    ctx.stroke();
  }
 
 
  /* 获取随机色值*/
 
  //  a 先获取一个随机数
  console.log(Math.random()); //产生一个0~1之间的随机小数
  var num = Math.random() * (100 - 30 + 1) + 30; //产生一个随机数30~100 之间的数
  console.log(num);
 
  //  b 获取一个区间段的随机数(整数)
  function randNum(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
  }
 
  //   c获取随机颜色值
  function getRandColor(min, max) {
    var R = randNum(min, max);
    var G = randNum(min, max);
    var B = randNum(min, max);
 
    return 'rgb(' + R + ',' + G + ',' + B + ')';
  }
 
 
</script>
 
 
</body>
</html>

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

Javascript 相关文章推荐
javascript与CSS复习(三)
Jun 29 Javascript
没有document.getElementByName方法
Aug 19 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
jquery自适应布局的简单实例
May 28 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
原生js实现弹幕效果
Nov 29 #Javascript
javascript实现点击小图显示大图
Nov 29 #Javascript
js实现简易点击切换显示或隐藏
Nov 29 #Javascript
webpack4从0搭建组件库的实现
Nov 29 #Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 #Javascript
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
js实现扫雷源代码
Nov 27 #Javascript
You might like
PHP获取MAC地址的函数代码
2011/09/11 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
Javascript学习笔记 delete运算符
2011/09/13 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
python处理二进制数据的方法
2015/06/03 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
质量整改报告范文
2014/11/08 职场文书
2015年商场工作总结
2015/04/27 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers