js实现canvas验证码功能

全职程序猿

已于 2023-07-02 18:00:32 修改

阅读量457

点赞数 1

文章标签：前端 javascript html

于 2023-06-21 08:44:07 首次发布

本文链接：https://blog.csdn.net/nh2r1114/article/details/131320376

版权

该文章展示了如何使用HTML5的Canvas元素和JavaScript来创建一个简单的图形验证码。代码包括生成随机验证码字符串、绘制背景及干扰线，并提供了刷新验证码的功能，以增强网页表单的安全性。

摘要由CSDN通过智能技术生成

Canvas验证码是一种在网页上使用HTML5 Canvas元素生成的图形验证码。以下是一个简单的示例代码，用于生成和展示Canvas验证码：

HTML部分：

<canvas id="captchaCanvas" width="200" height="100"></canvas>
<button onclick="generateCaptcha()">刷新验证码</button>

JavaScript部分:

function generateCaptcha() {
  var canvas = document.getElementById('captchaCanvas');
  var context = canvas.getContext('2d');

  // 生成随机验证码字符串
  var captchaText = generateRandomCode(4); // 可自定义验证码长度
  
  // 绘制背景色
  context.fillStyle = '#f5f5f5';
  context.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制验证码文字
  context.font = '30px Arial';
  context.fillStyle = '#333';
  context.fillText(captchaText, 50, 55);

  // 绘制干扰线
  for (var i = 0; i < 6; i++) {
    context.strokeStyle = getRandomColor();
    context.beginPath();
    context.moveTo(getRandomNumber(0, canvas.width), getRandomNumber(0, canvas.height));
    context.lineTo(getRandomNumber(0, canvas.width), getRandomNumber(0, canvas.height));
    context.stroke();
  }
}

// 生成指定范围内的随机整数
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 生成随机颜色
function getRandomColor() {
  var r = getRandomNumber(0, 255);
  var g = getRandomNumber(0, 255);
  var b = getRandomNumber(0, 255);
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}

// 生成指定长度的随机验证码
function generateRandomCode(length) {
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var code = '';
  for (var i = 0; i < length; i++) {
    code += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return code;
}

以上代码会在网页上显示一个Canvas元素和一个刷新按钮。点击刷新按钮时，会生成一个新的随机验证码并在Canvas上展示出来，同时绘制一些干扰线以增加验证码的可读性和安全性。

您可以根据实际需求自定义验证码的长度、字体样式、颜色等。此外，为了增加验证码的安全性，还可以考虑添加字体扭曲、噪点、阴影等效果，以防止机器自动识别。