使用canvas及js简单生成验证码方法_网络技术_宿州市腾雀网络科技有限公司

使用canvas及js简单生成验证码方法

发布时间 - 2026-01-11 00:29:42 点击率：次

在很多时候都需要用到验证码，前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是：

1.生成一张画布canvas

2.生成随机数验证码

3.在画布中生成干扰线

4.把验证码文本填充到画布中

5.点击画布更换验证码

结构与样式：

<canvas id="mycanvas" width='90' height='40'>
 您的浏览器不支持canvas，请换个浏览器试试~
</canvas>

<style>
#mycanvas{
 cursor: pointer;
}
</style>

下面来编写js代码：

/*生成4位随机数*/
 function rand(){
  var str="abcdefghijklmnopqrstuvwxyz0123456789";
  var arr=str.split("");
  var validate="";
  var ranNum;
  for(var i=0;i<4;i++){
   ranNum=Math.floor(Math.random()*36); //随机数在[0,35]之间
   validate+=arr[ranNum];
  }
  return validate;
 }
 /*干扰线的随机x坐标值*/
 function lineX(){
  var ranLineX=Math.floor(Math.random()*90);
  return ranLineX;
 }
 /*干扰线的随机y坐标值*/
 function lineY(){
  var ranLineY=Math.floor(Math.random()*40);
  return ranLineY;
 }
 function clickChange(){
  var mycanvas=document.getElementById('mycanvas');
  var cxt=mycanvas.getContext('2d');
  cxt.fillStyle='#000';
  cxt.fillRect(0,0,90,40);
  /*生成干扰线20条*/
  for(var j=0;j<20;j++){
   cxt.strokeStyle='#fff';
   cxt.beginPath(); //若省略beginPath，则每点击一次验证码会累积干扰线的条数
   cxt.moveTo(lineX(),lineY());
   cxt.lineTo(lineX(),lineY());
   cxt.lineWidth=0.5;
   cxt.closePath();
   cxt.stroke();
  }
  cxt.fillStyle='red';
  cxt.font='bold 20px Arial';
  cxt.fillText(rand(),25,25); //把rand()生成的随机数文本填充到canvas中  
 }
 clickChange();
 /*点击验证码更换*/
 mycanvas.onclick=function(e){
  e.preventDefault(); //阻止鼠标点击发生默认的行为
  clickChange();
 };

这样就写好一个较普通的验证码了，当然也有很多需要优化的地方，比如干扰线的随机颜色、可以加干扰点以及文本的随机位置随机颜色等等。赶紧去试试吧~

# canvas # 生成验证码 # js # 绘制验证码 # js生成验证码 # 原生js+canvas实现验证码 # js+h5 canvas实现图片验证码 # js+canvas绘制图形验证码 # JavaScript使用canvas绘制随机验证码 # JS+HTML5 canvas绘制验证码示例 # JavaScript Canvas实现验证码 # js+canvas实现验证码功能 # js+canvas实现滑动拼图验证码功能 # js实现点击获取验证码倒计时效果 # js canvas实现验证码并获取验证码功能 # 验证码 # 随机数 # 您的 # 也有 # 坐标值 # 不支持 # 换个 # 好一个 # 条数 # 就写 # 鼠标点击 # 试试吧 # cursor # pointer # gt # style # arr # validate # split # str

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：mysql执行sql报错如何定位_mysql错误定位方法

下一篇：如何在Linux中管理临时文件目录？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：mysql执行sql报错如何定位_mysql错误定位方法

下一篇：如何在Linux中管理临时文件目录？