JavaScript 验证码制作

泛华·子曦

于 2021-11-12 14:55:16 发布

阅读量716

点赞数 2

文章标签： javascript 前端 html5

泛华

本文链接：https://blog.csdn.net/qq_49697349/article/details/121288005

版权

这篇博客详细介绍了如何使用HTML5的canvas元素和JavaScript来创建一个字符验证功能。通过随机选取颜色、字体大小和字符，绘制在canvas上，并填充随机小方块，实现了动态的验证码生成。该过程涉及到了前端开发中的canvas绘图和JavaScript编程技巧。

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

HTML标签：

<canvas class="canvas_ver"></canvas>

JavaScript部分：

function verification(className){
                  intIndex = 4;
                  let canvas_ver = className;
                  let canvas_ver1 = canvas_ver.getContext('2d');
                  canvas_ver1.clearRect(1,1,300,149);
                  canvas_ver1.strokeRect(1,1,300,149);
                  canvas_ver1.textAlign= 'center'
                  let canvas_text_color = ['red','blue','green','yellow','black'];
                  let canvas_text_size = ['50pt','55pt','60pt','45pt'];
                  let canvas_text_val = [
                      'Q','W','E','R','T','Y','U','I','O','P', 'A','S', 'D',
                      'F','G','H','J','K','L','Z', 'X','C','V','B','N','M',
                      'q','w','e','r','t','y','u','i','o','p','a','s','d',
                      'f','g','h','j','k','l','z','x','c','v','b','n','m',
                      '0','1','2','3','4','5','6','7','8','9'
                  ];
                  let ret = Array();
                  ret[intIndex]='';
                  for (let i=0,j=50;i<intIndex;i++){
                      let index1 = parseInt(Math.random()*(canvas_text_color.length-1));
                      let index2 = parseInt(Math.random()*(canvas_text_size.length-1));
                      let index3 = parseInt(Math.random()*(canvas_text_val.length-1));
                      canvas_ver1.fillStyle = canvas_text_color[index1];
                      canvas_ver1.font = canvas_text_size[index2]+' auto';
                      canvas_ver1.fillText(canvas_text_val[index3],j += 50,100);
                      for (let i=0;i<30;i++){
                          canvas_ver1.fillStyle = canvas_text_color[index1];
                          canvas_ver1.fillRect(Math.random()*300+1,Math.random()*150+1,5,5);
                      }
                      ret[i] = canvas_text_val[index3];
                  }
                  for (let i=0;i<intIndex;i++){
                      ret[intIndex] += ret[i];
                  }
                  return ret[intIndex];
              }