原生JavaScript实现简单的图形验证码

更新时间：2023年11月23日 08:22:41 作者：方苕爱吃瓜

这篇文章主要为大家详细介绍了如何利用原生JavaScript实现简单的图形验证码,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考下

思路：此处假设验证码为4位随机数值，数值刷新满足两个条件①页面新进/刷新。②点击图片刷新。（实际情况下还要考虑登录出错刷新，此处只做样式不写进去）实现过程为1.先写一个canvas标签做绘图容器。 → 2.将拿到的值绘制到容器中并写好样式。 → 3.点击刷新重新绘制。

写一个canvas标签当容器

<canvas
    style="width: 100px;border: 2px solid rgb(60, 137, 209);background-image: url('https://gd-hbimg.huaban.com/aa3c7f23dfdc7b2d317aa4b77bd6c7b8469564d2dfa8b-Btd5c6_fw658webp');"
    id="captchaCanvas"></canvas>

并设置容器宽高背景颜色或图片等样式

写一个数值绘制到canvas的方法

//text为传递的数值
function generateCaptcha(text, callback) {
      var canvas = document.getElementById('captchaCanvas');
      var ctx = canvas.getContext('2d');
      // 设置字体及大小
      ctx.font = '100px Comic Sans MS';
      // 设置字体颜色
      ctx.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 调整文字图形位置
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
      // 调整阴影范围
      ctx.shadowBlur = Math.random() * 20;
      // 调整阴影颜色
      ctx.shadowColor = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 调整阴影位置（偏移量）
      ctx.shadowOffsetX = Math.random() * 10;
      ctx.shadowOffsetY = Math.random() * 10;
      // 绘制文字图形及其偏移量
      ctx.fillText(text, 25, 35);
      // 绘制文字边框及其偏移量
      ctx.strokeText(text, Math.random() * 35, Math.random() * 45);

      var imgDataUrl = canvas.toDataURL();
      callback(imgDataUrl);

    }

拿到数值调用绘制方法

此处为样式示例，因此数值我用4位随机数表示，实际情况为你从后端取得的值，并依靠这个值在后端判断验证码是否一致。

// 调用函数生成验证码并显示在页面上  
    generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });

监听标签点击实现点击刷新

此处要注意一定要先清空canvas中已绘制图像再渲染新数值，因此直接将清除范围设置较大。

 // 监听点击更新验证码
    document.getElementById("captchaCanvas").addEventListener("click", function (event) {
      // 清空画布
      document.getElementById("captchaCanvas").getContext("2d").clearRect(0, 0, 9999, 9999);
      // 调用函数生成验证码并显示在页面上  
      generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });
    })

最后实现效果：

完整代码演示

<!DOCTYPE html>
<html>

<head>
  <title>String to Captcha</title>
</head>

<body>
  <canvas
    style="width: 100px;border: 2px solid rgb(60, 137, 209);background-image: url('https://gd-hbimg.huaban.com/aa3c7f23dfdc7b2d317aa4b77bd6c7b8469564d2dfa8b-Btd5c6_fw658webp');"
    id="captchaCanvas"></canvas>


  <script>
    // 监听点击更新验证码
    document.getElementById("captchaCanvas").addEventListener("click", function (event) {
      // 清空画布
      document.getElementById("captchaCanvas").getContext("2d").clearRect(0, 0, 9999, 9999);
      // 调用函数生成验证码并显示在页面上  
      generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });
    })

    function generateCaptcha(text, callback) {
      var canvas = document.getElementById('captchaCanvas');
      var ctx = canvas.getContext('2d');
      // 设置字体及大小
      ctx.font = '100px Comic Sans MS';
      // 设置字体颜色
      ctx.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 调整文字图形位置
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
      // 调整阴影范围
      ctx.shadowBlur = Math.random() * 20;
      // 调整阴影颜色
      ctx.shadowColor = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 调整阴影位置（偏移量）
      ctx.shadowOffsetX = Math.random() * 10;
      ctx.shadowOffsetY = Math.random() * 10;
      // 绘制文字图形及其偏移量
      ctx.fillText(text, 25, 35);
      // 绘制文字边框及其偏移量
      ctx.strokeText(text, Math.random() * 35, Math.random() * 45);

      var imgDataUrl = canvas.toDataURL();
      callback(imgDataUrl);

    }

    // 调用函数生成验证码并显示在页面上  
    generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });
  </script>
</body>

</html>

到此这篇关于原生JavaScript实现简单的图形验证码的文章就介绍到这了,更多相关JavaScript图形验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript的防抖和节流案例
这篇文章介绍了JavaScript的防抖和节流案例的代码实现和概念.包含详细的代码,希望对你有所帮助
2021-06-06
Three.js+React使二维图片呈现3D效果
这篇文章主要为大家介绍了如何利用Three.js+React技术栈，将二维漫画图片转化为三维视觉效果。文中的实现方法讲解详细，需要的可以参考一下
2022-02-02
微信小程序使用uni-app和springboot实现一键登录功能(JWT鉴权)
微信一键登录是指用户在使用小程序时,可以通过微信账号进行快速登录,而无需额外的注册和密码设置,这篇文章主要给大家介绍了关于微信小程序使用uni-app和springboot实现一键登录功能的相关资料,需要的朋友可以参考下
2023-11-11
原生js实现抽奖小游戏
这篇文章主要为大家详细介绍了原生js实现抽奖小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
JavaScript编程设计模式之构造器模式实例分析
这篇文章主要介绍了JavaScript编程设计模式之构造器模式,简单讲述了构造器模式的概念、原理,并结合实例形式分析了构造器模式的定义与使用方法,需要的朋友可以参考下
2017-10-10
bootstrap输入框组件使用方法详解
这篇文章主要为大家详细介绍了bootstrap输入框组件使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
UniApp中Scroll-View设置占满下方剩余高度的方法记录
在使用uniapp开发项目过程中有时候会想让一些组件占有屏幕剩余的高度,下面这篇文章主要给大家介绍了关于UniApp中Scroll-View设置占满下方剩余高度的方法,需要的朋友可以参考下
2023-04-04
使用pdf-lib.js实现拼接两个pdf文件并添加水印
这篇文章主要为大家详细介绍了如何使用pdf-lib.js实现拼接两个pdf文件并添加水印,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
2024-11-11
Math.js解决js中小数精度丢失问题
在JavaScript中进行小数运算时,会容易出现精度丢失的问题,例如在进行两个小数相加时,结果并不是预期的精确值,而是一个近似值,,使用第三方库Math.js可以避免精度丢失的问题,本文导入Math.js库和使用Math.js的方法来进行小数运算,同时还可以指定格式来保留小数位数
2023-12-12
JavaScript动画函数封装详解
动画的原理是通过定时器setInterval() 不断移动盒子位置。但是如果同时有好几个元素都需要添加动画呢？我们就可以考虑将其封装成一个简单的动画函数。本文将为大家介绍如何进行封装，需要的可以参考一下
2021-12-12