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 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
基于jquery实现五星好评
Nov 18 jQuery
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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中cookies使用指南
2007/03/16 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Python TCP通信客户端服务端代码实例
2019/11/21 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
道德模范先进事迹
2014/02/14 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
浅析Django接口版本控制
2021/06/26 Python
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers