js+canvas绘制图形验证码


Posted in Javascript onSeptember 21, 2020

本文实例为大家分享了利用canvas绘制图形验证码的具体代码,供大家参考,具体内容如下

思路:通过随机获取指定字符串的指定数的字符,通过canvas绘制出来

返回指定范围的随机整数

//指定范围的随机函数:返回指定范围内的随机整数
function rand(min, max) {
    /*
    max=10
    min=1

      Math.random()=0  最小取到1
      Math.random()=0.9999*10=Math.floor(9.9)=>+1=10

    */
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

返回指定数量的随机字符串

function randStr(count) {
    var str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var code = '';
    for (var i = 0; i < count; i++) {

      var index = rand(0, str.length - 1)//必须减一否则会出现下标越界
      code += str.charAt(index) + ' ';
    }
    return code
  }

绘制图形

function verify(selector) {
    //获取canvas的dom对象
    var cas = document.querySelector(selector);
    //获取上下文对象
    var ctx = cas.getContext('2d');
    //指定接收的字符串
    var code = randStr(5);

    //绘制矩形,作背景色
    ctx.fillStyle = 'orange';
    //绘制实心矩形
    ctx.fillRect(0, 0, 160, 50)


    //文字居中
    // ctx.textAlign = 'left'
    //字体样式的属性要遵循css中的书写顺序
    ctx.font = '900 24px 宋体'
    //设置字体颜色
    ctx.fillStyle = '#FFF';
    //绘制文字
    ctx.fillText(code, 20, 30);
  }

鼠标点击更新验证码

document.querySelector('canvas').addEventListener('click', function () {
    verify('canvas')
  })

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制图形验证码</title>
  <style>
    canvas {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <canvas width="160" height="50"></canvas>
</body>
<script>

  verify('canvas')
  document.querySelector('canvas').addEventListener('click', function () {
    verify('canvas')
  })
  function verify(selector) {
    //获取canvas的dom对象
    var cas = document.querySelector(selector);
    //获取上下文对象
    var ctx = cas.getContext('2d');
    //指定接收的字符串
    var code = randStr(5);

    //绘制矩形,作背景色
    ctx.fillStyle = 'orange';
    //绘制实心矩形
    ctx.fillRect(0, 0, 160, 50)

    //字体样式的属性要遵循css中的书写顺序
    ctx.font = '900 24px 宋体'
    //设置字体颜色
    ctx.fillStyle = '#FFF';
    //绘制文字
    ctx.fillText(code, 20, 30);
  }




  //指定范围的随机函数:返回指定范围内的随机整数
  function rand(min, max) {
    /*
    max=10
    min=1

      Math.random()=0  最小取到1
      Math.random()=0.9999*10=Math.floor(9.9)=>+1=10

    */
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  //返回随机字符串
  function randStr(count) {
    var str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var code = '';
    for (var i = 0; i < count; i++) {

      var index = rand(0, str.length - 1)//必须减一否则会出现下标越界
      code += str.charAt(index) + ' ';
    }
    return code
  }
  // console.log(randStr(6))
</script>

</html>

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

Javascript 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
vue中路由跳转不计入history的操作
Sep 21 #Javascript
JS实现放大镜效果
Sep 21 #Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 #Javascript
Vue Element校验validate的实例
Sep 21 #Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 #Javascript
vue3.0 上手体验
Sep 21 #Javascript
微信小程序实现点击页面出现文字
Sep 21 #Javascript
You might like
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
如何清空python的变量
2020/07/05 Python
Django视图、传参和forms验证操作
2020/07/15 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
自我鉴定200字
2013/10/28 职场文书
大学生军训自我评价分享
2013/11/09 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
小学生秋游活动方案
2014/02/23 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
合伙协议书
2014/04/23 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
大学新闻系自荐书
2014/05/31 职场文书
基层党组织整改方案
2014/10/25 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
调研报告的主要写法
2019/04/18 职场文书