原生js+canvas实现验证码

 更新时间:2020年11月29日 09:41:32   作者:Mr.王征  
这篇文章主要为大家详细介绍了原生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>

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

相关文章

  • 详解如何webpack使用DllPlugin

    详解如何webpack使用DllPlugin

    这篇文章主要介绍了详解如何webpack使用DllPlugin,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 使用Bootstrap做一个朝代历史表

    使用Bootstrap做一个朝代历史表

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。这篇文章主要介绍了使用Bootstrap做一个朝代历史表,需要的朋友可以参考下
    2019-12-12
  • postMessage的两种使用方式

    postMessage的两种使用方式

    这篇文章主要介绍了使用postMessage实现iframe跨域通信,第一种使用postMessage在irfame中实现跨域数据传递,第二种使用postMessage在window.open()中的使用,本文结合示例代码给大家详细讲解,需要的朋友跟随小编一起看看吧
    2022-03-03
  • 微信小程序实现天气预报功能(附源码)

    微信小程序实现天气预报功能(附源码)

    这篇文章主要介绍了微信小程序实现天气预报功能(附源码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 在HTML中使用JavaScript的两种方法

    在HTML中使用JavaScript的两种方法

    这篇文章主要介绍了在HTML中使用JavaScript的两种方法,帮助大家更好的理解和制作网页,感兴趣的朋友可以了解下
    2020-12-12
  • JS实现动态给标签控件添加事件的方法示例

    JS实现动态给标签控件添加事件的方法示例

    这篇文章主要介绍了JS实现动态给标签控件添加事件的方法,结合实例形式分析了javascript简单实现动态添加事件的相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • JavaScript定时器常见用法实例分析

    JavaScript定时器常见用法实例分析

    这篇文章主要介绍了JavaScript定时器常见用法,结合实例形式分析了JavaScript定时器常见功能、应用及相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • URLSearchParams快速解析URL查询参数实现

    URLSearchParams快速解析URL查询参数实现

    这篇文章主要为大家介绍了URLSearchParams快速解析URL查询参数实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • JavaScript AOP编程实例

    JavaScript AOP编程实例

    这篇文章主要介绍了JavaScript AOP编程,实例分析了javascript实现AOP编程的基本技巧,需要的朋友可以参考下
    2015-06-06
  • js获取页面description的方法

    js获取页面description的方法

    这篇文章主要介绍了js获取页面description的方法,涉及javascript操作页面元素的相关技巧,需要的朋友可以参考下
    2015-05-05

最新评论