canvas生成验证码

最新推荐文章于 2025-04-13 21:29:42 发布

anchor_1

最新推荐文章于 2025-04-13 21:29:42 发布

阅读量224

点赞数

文章标签： js canvas

本文链接：https://blog.youkuaiyun.com/anchor_1/article/details/111428410

版权

博客涉及JavaScript和Canvas相关信息技术内容，但具体内容未给出。JavaScript是前端开发常用语言，Canvas可用于绘制图形等操作。

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

<body>
  <canvas id="canvas" width="120" height="40"></canvas>
  <script type="text/javascript">
    function YZM(selector, w, h) {
      // 随机数的生成函数

      function rn(min, max) {
        return parseInt(Math.random() * (max - min) + min)
      }

      // 随机生成颜色的函数
      function rc(min, max) {
        var r = rn(min, max);
        var g = rn(min, max);
        var b = rn(min, max);
        return `rgb(${r},${g},${b})`
      }

      var w = w;
      var h = h;
      var canvas = document.querySelector(selector);
      var ctx = canvas.getContext('2d')
        // 在canvas上绘制背景颜色
      console.log(rc(180, 230))
      ctx.fillStyle = rc(180, 230)
      ctx.fillRect(0, 0, w, h)

      // 随机字符串
      var pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
      var result = ''
      for (var i = 0; i < 4; i++) {
        // 取出随机的字母或数字
        var c = pool[rn(0, pool.length)]
          // 随机出字体大小
        var fs = rn(18, 40)
          // 随机字母数字的旋转角度
        var deg = rn(-30, 30);
        ctx.font = fs + 'px Simhei';
        ctx.textBaseline = 'top';
        // 设置字体的填充颜色
        ctx.fillStyle = rc(80, 150)
        ctx.save()
        ctx.translate(30 * i + 15, 15)
        ctx.rotate(deg * Math.PI / 180);
        ctx.fillText(c, -10, -10);
        ctx.restore()
        result += c;
        console.log(c)
      }

      // 随机生成干扰线
      for (var i = 0; i < 5; i++) {
        ctx.beginPath();
        ctx.moveTo(rn(0, w), rn(0, h));
        ctx.lineTo(rn(0, w), rn(0, h));
        ctx.strokeStyle = rc(180, 230)
        ctx.closePath();
        ctx.stroke()
      }

      // 随机产生40个小的干扰圆点
      for (var i = 0; i < 40; i++) {
        ctx.beginPath();
        ctx.arc(rn(0, w), rn(0, h), 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fillStyle = rc(150, 200)
        ctx.fill()
      }

      return result
    }

    let yzm = YZM('#canvas', 120, 40)
    console.log(yzm)

  </script>
</body>