注意：

真正项目中验证码图片都是由服务器端(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. Php ArrayIterator的几个常用方法

    搜索商低..从php.net找到 ,自己翻译一下 总结在一起   rewind()    指针回到初始位置 valid()        判断数组当前指针下是否有元素 key()        数组键 ...

  2. Linux Shell编程第5章——文件的排序、合并和分割

    目录 sort命令 sort命令的基本用法 uniq命令 join命令 cut命令 paste命令 split命令 tr命令 tar命令 sort命令 sort命令是Linux系统一种排序工具,它将输 ...

  3. redis.conf配置项说明

    #是否以后台进程运行,默认为no,如果需要以后台进程运行则改为yes daemonize no #如果以后台进程运行的话,就需要指定pid,你可以在此自定义redis.pid文件的位置. pidfil ...

  4. 转：使用log4net完成程序异常日志记录（使用SQLite数据库记录和普通文本记录）

    http://www.cnblogs.com/kyo-yo/archive/2010/06/11/use-log4net-to-log-exception.html 在前端时间开发的时候由于需要将异常 ...

  5. flex graphiclar symbol的不同比例尺切换

    private var cityGraL:GraphicsLayer;//标记城市 maxScale=50000 private var siteGraL:GraphicsLayer;//标记站点 m ...

  6. SpringBoot 通用Error设计

    在项目中需要设计统一的错误消息,通常使用枚举类定义"错误码"与"错误消息": 并且也可以做错误消息自定义. 定义通过错误接口类:CommonError publ ...

  7. PHP的date函数的时区问题

    来自:http://www.cnblogs.com/fuland/p/4250462.html(“腐烂的翅膀”的博客) 从php5.1.0开始,php.ini里加入了date.timezone这个选项 ...

  8. MySQL的索引实现原理

    MySQL数据库索引总结使用索引的原由数据结构Hash.平衡二叉树.B树.B+树区别机械硬盘.固态硬盘区别Myisam与Innodb B+树的区别MySQL中的索引什么数据结构B+树中的节点到底存放多 ...

  9. 关于使用UniForm以其他控件为Parent时应该注意的问题

    关于使用UniForm以其他控件为Parent时应该注意的问题: 1,不能在其他组件的oncreate,onbeforeshow,onshow等事件中来生成这样的uniform,否则其上的组件不能显示 ...

  10. spring注解方式注入bean

    用注解的方式注入bean,spring的配置文件也要增加一些约束和导入注解所在的包 applicationContext.xml <?xml version="1.0" en ...