注意：

真正项目中验证码图片都是由服务器端(PHP、JSP、Node.js)技术来生成。

最终效果：

代码：

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    body {

      text-align: center;

    }

    canvas {

      background: #ddd;

    }

  </style>

</head>

<body>

<h3>验证码图片</h3>

<canvas id="c9"></canvas>

<script>

  var cw = 120;   //画布的总宽度

  var ch = 30;    //画布的总高度

  c9.width = cw;

  c9.height = ch;

  var ctx = c9.getContext('2d');

  /**1.绘制背景颜色——填充矩形**/

  ctx.fillStyle = rc(150, 230);

  ctx.fillRect(0, 0, cw, ch);

  /**2.循环绘制4个随机字符**/

  ctx.textBaseline = 'top';

  var pool = 'ABCDEFGHJKLMNPQRSTUVWXY3456789';

  for (var i = 0; i < 4; i++) {

    var c = pool[rn(0, pool.length)];//一个随机字符

    var fs = rn(10, 40); //字体大小

    ctx.font = fs + 'px  SimHei';

    var fc = rc(50, 150); //字体颜色

    ctx.strokeStyle = fc;

    var deg = rn(-45, 45);//旋转角度

    var x = -fs / 2;      //每个字符左上角的坐标

    var y = -fs / 2;

    //绘制一个字符: 保存状态->平移->旋转->绘制->恢复状态

    ctx.save();

    ctx.translate(30*i+15, 15);

    ctx.rotate(deg*Math.PI/180);

    ctx.strokeText(c, x, y);

    ctx.restore();

  }

  /**3.绘制5条干扰线——直线路径**/

  for(var i=0; i<5; i++){

    ctx.beginPath();

    ctx.moveTo(rn(0,cw), rn(0, ch));

    ctx.lineTo(rn(0,cw), rn(0, ch));

    ctx.strokeStyle = rc(0, 255);

    ctx.stroke();

  }

  /**4.绘制50个杂色点——半径为0.5圆形路径**/

  for(var i=0; i<50; i++){

    ctx.beginPath();

    ctx.arc(rn(0,cw), rn(0, ch),0.5, 0, 2*Math.PI);

    ctx.fillStyle = rc(0, 255);

    ctx.fill();

  }

  //random number，返回指定范围内的随机整数

  function rn(min, max) {

    return Math.floor(Math.random() * (max - min) + min);

  }

  //random color，返回指定范围内的随机颜色

  function rc(min, max) {

    var r = rn(min, max);

    var g = rn(min, max);

    var b = rn(min, max);

    return `rgb(${r}, ${g}, ${b})`;

  }

</script>

</body>

</html>

canvas 绘制验证码的更多相关文章

  1. 用canvas绘制验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...

  2. canvas绘制验证码

    css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> body中添加标签 ...

  3. canvas实现验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SV ...

  4. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  5. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 通过GDI+绘制 验证码

    只为了记录下自己的学习历程,方便日后查看 现在开始言归正传,以下为其完整代码附上 using System; using System.Collections.Generic; using Syste ...

  8. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

随机推荐

  1. Top 10 Uses For A Message Queue

    We’ve been working with, building, and evangelising message queues for the last year, and it’s no se ...

  2. maven入门学习（一）

    一.maven介绍 1.软件开发中我们为什么要使用maven呢?(纯属个人体会观点,如有错误,敬请指正) (1)其一,企业岗位需求,目前的IT开发招聘岗位上,基本都要求会使用maven.        ...

  3. 利用同步网盘搭建个人或团队SVN服务器

    这篇文章是以前写的,现在强烈推荐两个站.1.http://git.oschina.com 2.http://www.coding.net. 推荐理由:1.可创建私有项目.2.免费稳定.3.VS2013 ...

  4. 外部类与main方法笔记

    外部类 1. 外部public class只能有一个 2. 外部类只能有两种访问控制级别: public 和默认 3. 一个文件中,可以有多个public class,即外部类为public,还可以有 ...

  5. lua身份证号码验证~

    --验证身份证信息 --只支持18位身份证的验证 --[[ #身份证18位编码规则:dddddd yyyymmdd xxx y #dddddd:地区码 #yyyymmdd: 出生年月日 #xxx:顺序 ...

  6. 汇编指令与Intrinsics指令的对应关系汇总

    汇编指令与Intrinsics指令的对应关系汇总 参考网址:https://software.intel.com/sites/landingpage/IntrinsicsGuide/ 1.赋值指令:m ...

  7. 使用axis2构建webservice

    axis2是可以实现webservice的一个插件,使用这个插件可以发布webservice 1:可以使用这个插件来发布webservice,可以看网址:http://clq9761.iteye.co ...

  8. SpringBoot和Mycat动态数据源项目整合

    SpringBoot项目整合动态数据源(读写分离) 1.配置多个数据源,根据业务需求访问不同的数据,指定对应的策略:增加,删除,修改操作访问对应数据,查询访问对应数据,不同数据库做好的数据一致性的处理 ...

  9. Luogu-3527 [POI2011]MET-Meteors

    Luogu-3527 [POI2011]MET-Meteors 题面 Luogu-3527 题解 感觉和上一那道题是一个类型的,直接二分答案,用BIT维护区间加(差分)即可 代码 #include&l ...

  10. 简单的aop实现日志打印（切入点表达式）

    Spring中可以使用注解或XML文件配置的方式实现AOP. 1.导入jar包 com.springsource.net.sf.cglib -2.2.0.jar com.springsource.or ...