原生js+canvas实现验证码

网络编程 2024/12/22 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

本文实例为大家分享了js+canvas实现验证码的具体代码，供大家参考，具体内容如下

效果展示：

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<style>
 
  canvas {
    border: 1px solid #000;
    vertical-align: bottom;
  }
 
  input {
    padding: 0;
    width: 120px;
    height: 30px;
    vertical-align: bottom;
    border: 1px solid #000;
  }
 
</style>
 
 
<input type="text" name="textContent" placeholder="输入">
<canvas id="can" width="120" height="30"></canvas>
<button>提交</button>
 
 
<script>
 
 
  /*1、背景颜色时随机的
 * 2、其中的内容是随机的
 * 3、内容的颜色 随机的
 * 4、每个字的旋转度数随机的
 * 5、文本的大小随机的
 * 6、干扰线的位置随机的
 * 7、干扰线的颜色随机的
 * 8、干扰点
 * */
 
  var btn = document.querySelector("button");
  var can = document.querySelector("canvas");
  var ctx = can.getContext("2d");
 
  var text = "0123456789abcdefghijklmnopqrstuvwsyzABCDEFGHIGKLMNOPQRSTUVWSYZ";
 
 
  //设置4个内容 将canvas 平分成4分 然后让内容在1/4的空间旋转缩放
  //原理 ：每次都是位移旋转之后再回复原位
  for (var i = 0; i < 4; i++) {
    var txt = text[randNum(0,text.length-1)];
 
    ctx.fillStyle = getRandColor(80,150);
    ctx.font=randNum(12,25)+"px '宋体'";
    ctx.textBaseline = "top";
    var x = randNum(0,10);
 
    var deg = randNum(-30,30);
 
    ctx.translate(x+30*i,0);
    ctx.rotate(Math.PI/180*deg);
    ctx.fillText(txt,0,0);
    ctx.rotate(Math.PI/180*-deg);
    ctx.translate(-(x+30*i),0);
 
  }
 
 
  /*干扰点*/
  for(var i=0;i<30;i++){
    ctx.beginPath();
    ctx.arc(randNum(0,120),randNum(0,30),1,0,Math.PI*2);
    ctx.fillStyle=getRandColor(150,180);
    ctx.fill();
  }

 
  /*干扰线*/
  for(var i=0;i<4;i++){
    ctx.beginPath();
    ctx.moveTo(randNum(0,120),randNum(0,30));
    ctx.lineTo(randNum(0,120),randNum(0,30));
    ctx.strokeStyle=getRandColor(150,180);
    ctx.lineWidth= randNum(1,2);
    ctx.stroke();
  }
 
 
  /* 获取随机色值*/
 
  //  a 先获取一个随机数
  console.log(Math.random()); //产生一个0~1之间的随机小数
  var num = Math.random() * (100 - 30 + 1) + 30; //产生一个随机数30~100 之间的数
  console.log(num);
 
  //  b 获取一个区间段的随机数(整数)
  function randNum(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
  }
 
  //   c获取随机颜色值
  function getRandColor(min, max) {
    var R = randNum(min, max);
    var G = randNum(min, max);
    var B = randNum(min, max);
 
    return 'rgb(' + R + ',' + G + ',' + B + ')';
  }
 
 
</script>
 
 
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,canvas,验证码

标签：

js,canvas,验证码

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“原生js+canvas实现验证码”

暂无原生js+canvas实现验证码的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

原生js+canvas实现验证码

js,canvas,验证码

基于jQuery拖拽事件的封装

原生js实现弹幕效果

评论“原生js+canvas实现验证码”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接