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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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实现删除字符串中任何字符的函数
2015/08/11 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
js实现简易计算器功能
2019/10/18 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
详解python中asyncio模块
2018/03/03 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
个人简历自我评价范文
2014/02/04 职场文书
会计演讲稿范文
2014/05/23 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2015年大学生工作总结
2015/04/21 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
《确定位置》教学反思
2016/02/18 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python