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

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

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

基于Html+Css+javascript的验证码生成

无标题页 .code { background:lightblue; font-family:Arial...
  • Esonpo
  • Esonpo
  • 2014年07月09日 17:38
  • 2407

nodejs产生图片验证码

基于html5 canvas 1、ubuntu 下安装 sudo apt-get install libcairo2-dev sudo npm install canvas 2、nodejs代码 v...
  • qxs965266509
  • qxs965266509
  • 2013年11月28日 17:09
  • 9016

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

基于html中canvas标签的验证码图片生成方法 小前端一只,在自己网站中写了一个留言功能,需要随机生成验证码,发现网上大多是用后台技术生成,无奈本人看不明白,无奈之下(其实从安全角度来看图片验证...
  • running_shuai
  • running_shuai
  • 2017年07月20日 18:08
  • 93

Asp.Net 生成验证码,清空缓存,分页方法,生成图片水印,防注入过滤,页面过滤HTML,文字转图片

using System; using System.Data; using System.Configuration; using System.Collections; using Sys...
  • shizhou168
  • shizhou168
  • 2014年06月27日 10:54
  • 609

HTML5 canvas 画网页验证码(验证码一般不可能是一张图片)

canvas标签画网页验证码........
  • a1455990364
  • a1455990364
  • 2017年12月03日 13:10
  • 118

HTML页面验证码生成方法(四位字幕)

  • 2012年10月08日 14:14
  • 1KB
  • 下载

使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码

  • 2015年08月17日 15:24
  • 167KB
  • 下载

验证码图片生成及刷新方法2(JSP生成)

生成图片的类代码如下: package com.lqh.util; import java.awt.Color; import java.awt.Font; import java.awt.G...
  • Edward_qing_Lee
  • Edward_qing_Lee
  • 2012年02月22日 14:35
  • 593

验证码图片生成以及刷新的方法1(Servlet生成)

一、Servlet生成验证码图片 Servlet类(SafeCode)代码如下: package com.lqh.util; import java.awt.Color; import jav...
  • Edward_qing_Lee
  • Edward_qing_Lee
  • 2012年02月22日 14:16
  • 1496

解决html5<canvas>标签像素变大,图片变模糊的情况

html5的标签功能非常强大,但今天发现在编辑画线的时候,实际显示的像素要比设置的大很多。经过尝试终于找到了原因。 以下是一个小例子 var can = document.getEle...
  • LinS_Yang
  • LinS_Yang
  • 2016年08月18日 11:25
  • 3660
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于html中canvas标签的验证码图片生成方法
举报原因:
原因补充:

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