H5——canvas实现生成验证码图片

最新推荐文章于 2024-01-07 12:55:23 发布

CaseyWei

最新推荐文章于 2024-01-07 12:55:23 发布

阅读量1.1k

点赞数 1

分类专栏： http

本文链接：https://blog.csdn.net/caseywei/article/details/83658214

版权

http 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>caseydemo</title>
  </head>
  <body>
  <canvas id="canvas" width="120" height="40"></canvas>
  <a href="#" id="changeImg">看不清，换一张</a>
  <script>
    /**生成一个随机数**/
    function randomNum(min,max){
      return Math.floor( Math.random()*(max-min)+min);
    }
    /**生成一个随机色**/
    function randomColor(min,max){
      var r = randomNum(min,max);
      var g = randomNum(min,max);
      var b = randomNum(min,max);
      return "rgb("+r+","+g+","+b+")";
    }
    drawPic();
    document.getElementById("changeImg").onclick = function(e){
      e.preventDefault();
      drawPic();
    }

    /**绘制验证码图片**/
    function drawPic(){
      var canvas=document.getElementById("canvas");
      var width=canvas.width;
      var height=canvas.height;
      var ctx = canvas.getContext('2d');
      ctx.textBaseline = 'bottom';

      /**绘制背景色**/
      ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
      ctx.fillRect(0,0,width,height);
      /**绘制文字**/
      var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
      for(var i=0; i<4; i++){
        var txt = str[randomNum(0,str.length)];
        ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
        ctx.font = randomNum(15,40)+'px SimHei'; //随机生成字体大小
        var x = 10+i*25;
        var y = randomNum(25,45);
        var deg = randomNum(-45, 45);
        //修改坐标原点和旋转角度
        ctx.translate(x,y);
        ctx.rotate(deg*Math.PI/180);
        ctx.fillText(txt, 0,0);
        //恢复坐标原点和旋转角度
        ctx.rotate(-deg*Math.PI/180);
        ctx.translate(-x,-y);
      }
      /**绘制干扰线**/
      for(var i=0; i<8; i++){
        ctx.strokeStyle = randomColor(40,180);
        ctx.beginPath();
        ctx.moveTo( randomNum(0,width), randomNum(0,height) );
        ctx.lineTo( randomNum(0,width), randomNum(0,height) );
        ctx.stroke();
      }
      /**绘制干扰点**/
      for(var i=0; i<100; i++){
        ctx.fillStyle = randomColor(0,255);
        ctx.beginPath();
        ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
        ctx.fill();
      }
    }
  </script>
  </body>
</html>

CaseyWei

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
H5——canvas实现生成验证码图片

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt; &lt;title&
复制链接

扫一扫