19.2.23 canvas 实现验证码效果_canvas绘验证码倾斜-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript创建的简单随机验证码生成器。该验证码由四个随机选择的大写字母组成，每个字母都有随机的颜色、倾斜角度和位置，以增加破解难度。文章详细展示了如何通过JavaScript控制canvas元素来实现这一效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
       #canvas{
           background-color: grey;
           /*把行级元素改为块级元素显示*/
           display: block;
           margin: 0 auto;
       }
    </style>
</head>
<body>

   <canvas id="canvas" width="200px" height="50px"></canvas>
   <script type="text/javascript">
       var canvas=document.getElementById("canvas");
       //获取绘画环境（为画板添加画布）
       var cv=canvas.getContext("2d");
       //定义一个数组存储26个字母
       var words='QWERTYUIOPPASDFGHJKLZXCVBNM';
       //定义字体
       cv.font='30px arial';
       for(var i=0;i<4;i++){
           //取0-25随机数
           var w=Math.floor(Math.random()*(25-0+1)+0);
           //获取随机位置
           var l=Math.floor(Math.random()*((50*i+30)-50*i+1)+50*i);
           var t=Math.floor(Math.random()*(35-25+1)+25);
           //获取随机颜色(0-255)
           var a=Math.floor(Math.random()*(255-0+1)+0);
           var b=Math.floor(Math.random()*(255-0+1)+0);
           var c=Math.floor(Math.random()*(255-0+1)+0);
           //颜色样式
           cv.fillStyle='rgb('+a+','+b+','+c+')';
           //设置倾斜角度(-3°到3°)
           var du=Math.floor(Math.random()*(3-(-3)+1)-3);
           cv.rotate(du*Math.PI/180);
           //填充字体
           cv.fillText(words[w],l,t);

       }



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