js验证码实现---使用Canvas绘制一个随机改变的验证码图片

使用Canvas绘制一个随机改变的验证码图片,如下图

var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';

var char = str[ 0~字符串长度间的随机数 ];

要求：

画布背景颜色随机(浅色) ctx.fillRect()

文字内容随机、大小随机，颜色随机(深色)、旋转角度随机。

5条随机干扰线（深色），处于文字上方。

100个杂色点（半径为1为圆），处于文字上方。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h3>使用canvas绘制一幅验证码图片</h3>
  <h4>真正的项目中,验证码图片是由服务器页面(如PHP)生成的,此练习仅仅作为演示</h4>
  <canvas id="c1"></canvas>
  <a href="javascript:void(0)" onclick="location.reload()">看不清?换一张</a>
  <script>
    var w=120; //画布的宽
    var h=30;  //画布的高
    c1.width=w;
    c1.height=h;
    var ctx=c1.getContext('2d');

    //绘制随机的背景颜色---填充一个大的矩形
    ctx.fillStyle=rc(180,230);
    ctx.fillRect(0,0,w,h);
    //绘制随机的文本--难点
    ctx.textBaseline='top';
    var pool='ABCDEFGHJKLMNPQRSTWXY3456789';
    for(var i=0;i<4;i++){
      var txt=pool[rn(0,pool.length)];
      ctx.fillStyle=rc(80,180);
      ctx.font=rn(10,20)+'px Arial';
      var txtWidth=ctx.measureText(txt).width;

      ctx.save();
      //平移原点+旋转画笔
      ctx.translate(i*30+15,15);
      ctx.rotate(rn(-15,15)*Math.PI/180);
      ctx.fillText(txt,rn(-15,15-txtWidth),rn(-15,15-txtWidth));
      ctx.restore();
    }
    //绘制6条随机干扰线
    for(var i=0;i<6;i++){
      ctx.beginPath();
      ctx.moveTo(rn(0,w),rn(0,h));
      ctx.lineTo(rn(0,w),rn(0,h));
      ctx.strokeStyle=rc(80,180);
      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(80,230);
      ctx.fill();
    }
    // random number:生成指定范围内的随机整数
    function rn(min,max) {
      return Math.floor(Math.random()*(max-min)+min);
    }
    //random color:生成指定范围内的随机颜色
    function rc(min,max) {
      var r=rn(min,max);
      var g=rn(min,max);
      var b=rn(min,max);
      return `rgb(${r},${g},${b})`;
    }


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

js验证码实现---使用Canvas绘制一个随机改变的验证码图片

猜你喜欢