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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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注入实例
2006/10/09 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP单链表的实现代码
2016/07/05 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
Openlayers绘制地图标注
2020/09/28 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
详解C++编程中一元运算符的重载
2016/01/19 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
在python3中实现更新界面
2020/02/21 Python
django model object序列化实例
2020/03/13 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
学校消防安全制度
2014/01/30 职场文书
社区居务公开实施方案
2014/03/27 职场文书