canvas 绘制验证码

 

注意：

 真正项目中验证码图片都是由服务器端(PHP、JSP、Node.js)技术来生成。

最终效果：

 

 

代码：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }

    canvas {
      background: #ddd;
    }
  </style>
</head>
<body>
<h3>验证码图片</h3>
<canvas id="c9"></canvas>
<script>
  var cw = 120;   //画布的总宽度
  var ch = 30;    //画布的总高度
  c9.width = cw;
  c9.height = ch;
  var ctx = c9.getContext('2d');

  /**1.绘制背景颜色——填充矩形**/
  ctx.fillStyle = rc(150, 230);
  ctx.fillRect(0, 0, cw, ch);

  /**2.循环绘制4个随机字符**/
  ctx.textBaseline = 'top';
  var pool = 'ABCDEFGHJKLMNPQRSTUVWXY3456789';
  for (var i = 0; i < 4; i++) {
    var c = pool[rn(0, pool.length)];//一个随机字符
    var fs = rn(10, 40); //字体大小
    ctx.font = fs + 'px  SimHei';
    var fc = rc(50, 150); //字体颜色
    ctx.strokeStyle = fc;
    var deg = rn(-45, 45);//旋转角度
    var x = -fs / 2;      //每个字符左上角的坐标
    var y = -fs / 2;
    //绘制一个字符: 保存状态->平移->旋转->绘制->恢复状态
    ctx.save();
    ctx.translate(30*i+15, 15);
    ctx.rotate(deg*Math.PI/180);
    ctx.strokeText(c, x, y);
    ctx.restore();
  }
  /**3.绘制5条干扰线——直线路径**/
  for(var i=0; i<5; i++){
    ctx.beginPath();
    ctx.moveTo(rn(0,cw), rn(0, ch));
    ctx.lineTo(rn(0,cw), rn(0, ch));
    ctx.strokeStyle = rc(0, 255);
    ctx.stroke();
  }
  /**4.绘制50个杂色点——半径为0.5圆形路径**/
  for(var i=0; i<50; i++){
    ctx.beginPath();
    ctx.arc(rn(0,cw), rn(0, ch),0.5, 0, 2*Math.PI);
    ctx.fillStyle = rc(0, 255);
    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>

 

posted @ 2017-05-26 19:37  快乐的咸鱼  阅读(1282)  评论(1)  编辑  收藏  举报