HTML5 Canvas 实现验证码技术-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46317118/article/details/105411539

本文详细介绍了如何使用HTML5的Canvas元素来创建复杂的验证码，涵盖了从绘制文本到添加干扰线和扭曲效果的全过程，旨在提高网站的安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

验证码小demo
代码如下 :

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
    text-align: center;
    }
    canvas{
      background: #ccc;
      margin:50px auto;
    }
  </style>
</head>
<body>
  <canvas id="c3" width="120px" height="30px" onclick="change()"></canvas>
</body>
<script>
  function change(){
  //获取画笔
  let c3=document.getElementById('c3');
  let ctx=c3.getContext("2d");
  //获取验证码字符库,字符串(***实由后端服务器获得***)
  let strs="ABCDEFGHJKLMNOPQRSTUVWZYZ78945623"

  //1.绘制实心矩形
  ctx.fillStyle = rgba(0,255,0.4); //随机色
  ctx.fillRect(0,0,120,30);
  //2.绘制随机的4位验证码
  for(var i=0;i<4;i++){
    ctx.fillStyle=rgb(0,255);//随机色
    ctx.font="24px SimHei";
    ctx.textBaseline="top";
    var text=strs[Math.floor(Math.random()*strs.length)];
    var x=16+i*25;
    ctx.fillText(text,x,3)
  }
  //3.绘制随机的干扰线(5-7条)
  for(var i=0;i<5;i++){
    ctx.beginPath();
    ctx.strokeStyle=rgba(0,255,0.7);//随机色
    ctx.moveTo(zb(0,120),zb(0,30));
    ctx.lineTo(zb(0,120),zb(0,30));
    ctx.stroke();
  }
  //4.绘制随机的干扰点(20-30个,半径1px)
  for(var i=0;i<20;i++){
    ctx.beginPath();
    ctx.fillStyle=rgba(0,255);//随机色
    ctx.arc(zb(0,120),zb(0,30),1,0,2*Math.PI);
    ctx.fill();
  }

  //封装函数zb,获取随机的x,y坐标
  function zb(min,max){
    return min+Math.floor((max-min+1)*Math.random())
  }
  //封装函数rgba,获取随机的颜色
  function rgba(min,max,a){
    a||(a=0); //透明度设置默认值0,不透明
    var r=zb(min,max);
    var g=zb(min,max);
    var b=zb(min,max);
    return `rgba(${r},${g},${b},${a})`
  }
  //字体不支持透明度,封装函数rgba
  function rgb(min,max){
    var r=zb(min,max);
    var g=zb(min,max);
    var b=zb(min,max);
    return `rgb(${r},${g},${b})`
  }   
}
//页面启动后,先调用一次
document.ready=change();

</script>
</html>

canvas验证码