基于html中canvas标签的验证码图片生成方法

原创 2016年08月31日 16:41:16

基于html中canvas标签的验证码图片生成方法

小前端一只,在自己网站中写了一个留言功能,需要随机生成验证码,发现网上大多是用后台技术生成,无奈本人看不明白,无奈之下(其实从安全角度来看图片验证码还是后台传过来比较好,前端生成没啥子意义 ╮(︶﹏︶)╭)

<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>

效果预览
这里写图片描述
这里写图片描述
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

一个Vue+Canvas的酷炫后台管理

又一个Vue+Cnavas酷炫的后台管理,依然前后端分离(用PC打开,还没适配移动端)。https://hzzly.github.io/2017/03/21/%E4%B8%80%E4%B8%AAVue...

vue.js进阶之组件

因为之前的项目用了vue,但是是边学边用,很多细节都不熟悉,比如vue-router,之前也写过vue+browserify构建大型应用。这次写一个vue最强大的功能,就是vue的组件。 首先推荐一...

socket + vue + canvas实践,你画我猜(一)

正式项目未开始,先先自己练手,做一个你画我猜小游戏,先上一个不完善的dome在线地址 http://www.5rgame.com 1.node; 安装socket,启动服务var io = requ...

socket + vue + canvas实践,你画我猜(二)

边学边做,你画我猜游戏的基本功能已经实现了,上个图。在线访问http://www.5rgame.com从本地开发到部署到服务器上,了解了很多以前没有涉及过的知识,有Linux,nginx,项目还在完善...

vue项目遇到的坑(vue项目中的某个组件调用外部js)

第一步骤 当项目做一个圆环进度条的时候,我自己用canvas写了一个js,并且封装成函数。当时想到的是直接将函数写在组件中然后进行调用: 报错了:Uncaught TypeError: Canno...

基于TVUE框架在中型移动端项目的直出同构实践

王鹤,高级前端工程师,就职于腾讯SNG增值产品部。主要负责QQ个性化业务的功能开发及技术优化。目前致力于打造「技术引擎」,提升效能和性能,解放生产力。

js 实现 图片刷新 验证码 看不清 换一张

【需求】 html+js实现html中一个图片刷新但是整个页面不刷新,或者是验证码刷新。 不使用jsp,不使用ajax,不使用js框架。 【原理】 当一个的src改变时,页面会自动刷新这个 ...
  • uikoo9
  • uikoo9
  • 2012-11-29 22:59
  • 37436

H5学习之路-图片验证码的实现

验证码想必大家都经常遇到,今天就给大家介绍一个比较简单的图片验证码的实现。 要实现验证码主要分生成和验证两步。首先生成,就是指某个用户看到验证码后台立马生成的,然后把这个生成图片的字符串保存放在se...

js生成验证码并验证

验证码 #code { font-family:Arial; font-style:italic; font-weight:bold; border:...
  • lwcumt
  • lwcumt
  • 2012-10-12 17:36
  • 67218

CSS3 Canvas实现一个带干扰线条的随机数验证码

工作中接到的任务是做一个带干扰项的验证码,首先想到的是利用H5的canvas来实现。 本想直接网上copy一段代码,但很多都不符合需求,索性自己写了,代码如下。 Your browser d...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)