前端利用canvas画布生成验证码

Bertha 。 2022-05-17 04:05 307阅读 0赞

直接贴代码
js部分

  1. function randomRgbColor() {  //随机生成RGB颜色
  2.             var r = Math.floor(Math.random() * 256); //随机生成256以内r值
  3.             var g = Math.floor(Math.random() * 256); //随机生成256以内g值
  4.             var b = Math.floor(Math.random() * 256); //随机生成256以内b值
  5.             return "rgb(" + r + "," + g + "," + b + ")"; //返回rgb(r,g,b)格式颜色
  6.         }
  7.         window.onload = function () { 
  8.             draw();
  9.             document.getElementById("changeImg").onclick=function(){ 
  10.                 draw();
  11.             }
  12.         }
  14.         function draw(){ 
  15.             var canvas = document.getElementById("canvas");
  16.             var context = canvas.getContext("2d");
  17.             canvas.width = 120;
  18.             canvas.height = 40;
  19.             context.strokeRect(0, 0, 120, 40);
  20.             var aCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,1,2,3,4,5,6,7,8,9";
  21.             console.log(aCode.split(","));
  22.             var aLength = aCode.split(",").length;
  23.             for (var i = 0; i <= 3; i++) {
  24.                 var x = 20 + i * 20;
  25.                 var y = 20 + Math.random() * 10;
  26.                 var j = Math.floor(Math.random() * aLength);
  27.                 var deg = Math.random() * 90 * Math.PI / 180;//随机弧度
  28.                 var txt = aCode.split(",")[j];
  29.                 context.fillStyle = randomRgbColor();
  30.                 context.font = "bold 20px 微软雅黑";
  31.                 //修改坐标原点和旋转角度
  32.                 context.translate(x, y);
  33.                 context.rotate(deg);
  34.                 context.fillText(txt, 0, 0);
  35.                 //恢复坐标原点和旋转角度
  36.                 context.rotate(-deg);
  37.                 context.translate(-x, -y);
  38.             }
  39.             //干扰线
  40.             for (var i = 0; i < 8; i++) {
  41.                 context.strokeStyle = randomRgbColor();
  42.                 context.beginPath();
  43.                 context.moveTo(Math.random() * 120, Math.random() * 40);
  44.                 context.lineTo(Math.random() * 120, Math.random() * 40);
  45.                 context.stroke();
  46.             }
  47.             /**绘制干扰点**/
  48.             for (var i = 0; i < 20; i++) {
  49.                 context.fillStyle = randomRgbColor();
  50.                 context.beginPath();
  51.                 context.arc(Math.random() * 120, Math.random() * 40, 1, 0, 2 * Math.PI);
  52.                 context.fill();
  53.             }
  54.         }

html部分

  1. <canvas id="canvas"></canvas>
  2.  <a href="javascript:;" id="changeImg">再换一张</a>

不知道为什么不能上传图片了，请自行测试。

发表评论

表情：
评论列表 （有 0 条评论，307人围观）

还没有评论，来说两句吧...

相关阅读

    相关 canvas画布

    canvas标签 <canvas></canvas> 接下来使用支持H5的浏览器打开该页面，将会看到如下内容： ![在这里插入图片描述][watermark

    系统管理员系统管理员/ 0 赞/ 205 阅读

    相关 canvas-画布

    概述 HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 \ 150；通过 JavaScript 可以在该区域上绘制图像

    浅浅的花香味﹌浅浅的花香味﹌/ 0 赞/ 121 阅读

    相关 利用java自动生成验证码

            验证码生成有两种形式，一种是保存一定的验证码图片在数据库中然后把相应的验证码也保存起来。通过查询数据库来确定用户输入的验证码是否正确。但是这种方式有很大的问题，

    迷南。迷南。/ 0 赞/ 225 阅读