canvas-验证码

Posted 2020-10-23 追忆枉然

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas-验证码相关的知识，希望对你有一定的参考价值。

纯属对Canvas API的练习

效果图：

目标：

1.画布中随机出现4个字母或数字的验证码

2.验证吗，内容随机，颜色随机，位置在当前块内随机；

3.添加4条干扰线，颜色长度随机

4.添加50个干扰颗粒，颜色随机，半径为1；

思路：

1.由于使用随机数据多，所以封装随机数函数 rn(min,max)

function rn(min,max){
    return Math.floor(Math.random()*(max-min)+min);
  }
//返回大于等于min ,小于max的数字

2.由于随机颜色使用多，封装随机颜色函数 rc(min,max)

function rc(min,max){
  var r=rn(min,max);
  var g=rn(min,max);
  var b=rn(min,max);
  return `rgb(${r},${g},${b})`;
}

3.创建字符串，包含验证码的数据，随机下标抽取四次，并绘制在画布上

//验证吗数据
var pool=\'ABCDEFGHEIJDKMNP123456789\';
//绘制4次
  for(var i=0;i<4;i++){
    var txt=pool[rn(0,pool.length)];
    ctx.font="10px Arial";
    ctx.save();
//获取文本宽度
    var tw=ctx.measureText(txt).width;
//以中心旋转，旋转角度（0-90）随机
    ctx.translate(30*i+15,10);
    ctx.rotate(rn(0,90)*Math.PI/180);
    ctx.fillStyle=rc(80,140);
    ctx.textBaseline="top";
//绘制文本
    ctx.fillText(txt,rn(-10,10-tw),rn(-10,10-10))
    ctx.restore();
  }

4.6条干扰线

  for(var i=0;i<6;i++){
    ctx.beginPath();
    ctx.strokeStyle=rc(60,120);
    ctx.moveTo(rn(0,w),rn(0,h));
    ctx.lineTo(rn(0,w),rn(0,h));
    ctx.stroke();
  }

5. 50个干扰点

  for(var i=0;i<50;i++){
    ctx.beginPath();
    ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
    ctx.fillStyle=rc(0,255);
    ctx.fill();
  }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{text-align: center}
  </style>
</head>
<body>
<h3>Canvas绘制画布</h3>
<canvas id="c1"></canvas>
<script>
  var w=120;
  var h=30;
  c1.width=w;
  c1.height=h;
  var ctx=c1.getContext("2d");
  ctx.fillStyle=rc(200,250);
  ctx.fillRect(0,0,w,h);
//  绘制随机文本
  var pool=\'ABCDEFGHEIJDKMNP123456789\';
  for(var i=0;i<4;i++){
    var txt=pool[rn(0,pool.length)];
    ctx.font="10px Arial";
    ctx.save();
    var tw=ctx.measureText(txt).width;
    ctx.translate(30*i+15,10);
    ctx.rotate(rn(0,90)*Math.PI/180);
    ctx.fillStyle=rc(80,140);
    ctx.textBaseline="top";
    ctx.fillText(txt,rn(-10,10-tw),rn(-10,10-10))
    ctx.restore();
  }
//  绘制随机6条干扰线
  for(var i=0;i<6;i++){
    ctx.beginPath();
    ctx.strokeStyle=rc(60,120);
    ctx.moveTo(rn(0,w),rn(0,h));
    ctx.lineTo(rn(0,w),rn(0,h));
    ctx.stroke();
  }
//  50个干扰点，半径为1的圆
  for(var i=0;i<50;i++){
    ctx.beginPath();
    ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
    ctx.fillStyle=rc(0,255);
    ctx.fill();
  }
//  随机颜色
function rc(min,max){
  var r=rn(min,max);
  var g=rn(min,max);
  var b=rn(min,max);
  return `rgb(${r},${g},${b})`;

}
//  随机数字
  function rn(min,max){
    return Math.floor(Math.random()*(max-min)+min);
  }

</script>
</body>
</html>

以上是关于canvas-验证码的主要内容，如果未能解决你的问题，请参考以下文章