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 浮动广告实现代码
Dec 25 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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文本操作类
2006/11/25 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PDO::quote讲解
2019/01/29 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
50行Python代码实现人脸检测功能
2018/01/23 Python
python实现网页自动签到功能
2019/01/21 Python
python验证码图片处理(二值化)
2019/11/01 Python
css3中transition属性详解
2014/09/02 HTML / CSS
留学自荐信的技巧
2013/10/17 职场文书
综合实践活动方案
2014/02/14 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
教师求职自荐信
2014/03/09 职场文书
软件项目开发计划书
2014/05/01 职场文书
幼儿园标语大全
2014/06/19 职场文书
员工安全责任书范本
2014/07/24 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
陪护人员误工证明
2015/06/24 职场文书
聘任通知书
2015/09/21 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python