注意：

真正项目中验证码图片都是由服务器端(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. datetime时间处理

    基本数据获取: In [38]: import datetime as dt In [39]: on = dt.datetime.now() #获取当前准确时间 In [40]: on Out[40] ...

  2. Python基础、判断、循环、列表、字典，day1

    一.Python 简介 1.介绍 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标 ...

  3. PAT 天梯赛 L1-019. 谁先倒 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-019 AC代码 #include <iostream> #include <cstdio&g ...

  4. Loadrunner场景设计篇——负载生成器

    1  简介 当执行一个场景时,Controller把场景中的每个用户配到负载生成器(Load generator). 所谓的负载生成器(Load Generator)就是执行Vuser脚本,运行Vus ...

  5. iOS导入高德地图出现缺失armv7--"Undefined symbols for architecture armv7"

    在已有项目中使用pod导入高德地图,报了以下错误: ld: warning: directory not found for option '-L/Users/paul/iOS/yun-hui-yi/ ...

  6. ubuntu linux 1604 编译安装tesseract-ocr 4.0

    主要参考官方的编译,梳理一下整个流程 Linux The build instructions for Linux also apply to other UNIX like operating sy ...

  7. oracle中INSTR函数的用法

    今天有个同学问我这个INSTR函数,我也不太清楚就上网查了查做一个小小的记录吧 INSTR(C1,C2,I,J) 在一个字符串中搜索指定的字符,返回发现指定的字符的位置; C1 被搜索的字符串 C2  ...

  8. OpenVpn部署使用easy-rsa-3.0

    OpenVpn简介 OpenVPN是一个用于创建虚拟专用网络(Virtual Private Network加密通道的免费开源软件.使用OpenVPN可以方便地在家庭.办公场所.住宿酒店等不同网络访问 ...

  9. 通过wifi连接android设备的方法

    [转自]http://blog.csdn.net/kuanxu/article/details/7444874 最近由于要在另外一台android设备上调试代码,在本机PC上查看其log.两台机器离的 ...

  10. IE6+以上清除浮动普遍方法总结

    浮动,CSSfloat属性.学过的人应该知道这个属性,平时用的应该也是很多的.特别是在N栏布局中. 但是我们会经常遇到这样一种情况,前面的元素浮动之后会影响后面的元素,后面的元素需要用清除浮动来消灭前 ...