注意：

真正项目中验证码图片都是由服务器端(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. LeetCode：二叉搜索树中第K小的数【230】

    LeetCode:二叉搜索树中第K小的数[230] 题目描述 给定一个二叉搜索树,编写一个函数 kthSmallest 来查找其中第 k 个最小的元素. 说明:你可以假设 k 总是有效的,1 ≤ k ...

  2. nginx3

    Yum安装更简单.安装并启动keepalived,表示安装成功.有3个进程. etc\keepalived\keepalived.conf: 备的keepalived配置文件: ! Configura ...

  3. Linux curl命令参数详解（6/23）

    linux curl是通过url语法在命令行下上传或下载文件的工具软件,它支持http,https,ftp,ftps,telnet等多种协议,常被用来抓取网页和监控Web服务器状态. 在Linux中c ...

  4. Sybase：游标用法以及嵌套用法

    Sybase:游标用法以及嵌套用法 游标示例一: --Sybase游标示例一: create PROCEDURE DBA.p_proc_test() ON EXCEPTION RESUME begin ...

  5. 20145235李涛《网络对抗》Exp8 Web基础

    基础问答 什么是表单 可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁. 表单包括两个部分:一部分是HTML源代码用于描述表单(例如,域,标签和用户在页面上看见的按钮),另一部分是脚本 ...

  6. Oracle 伪列

    ROWNUM ROWNUM:表示行号,实际上此是一个列,但是这个列是一个伪列,此列可以在每张表中出现. 范例:在查询雇员表上,加入 ROWNUM SELECT ROWNUM,empno,ename,j ...

  7. 搭建 Spring 开发环境

    把以下 jar 包加入到工程的 classpath 下: Spring 的配置文件: 一个典型的 Spring 项目需要创建一个或多个 Bean 配置文件, 这些配置文件用于在 Spring IOC ...

  8. JQuery -- Dom操作， 示例代码

    1.内部插入节点 *   append(content) :向每个匹配的元素的内部的结尾处追加内容 *   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 *   ...

  9. C语言查找算法之顺序查找、二分查找(折半查找)

    C语言查找算法之顺序查找.二分查找(折半查找),最近考试要用到,网上也有很多例子,我觉得还是自己写的看得懂一些. 顺序查找 /*顺序查找 顺序查找是在一个已知无(或有序)序队列中找出与给定关键字相同的 ...

  10. AOP切面用于系统日志

    import org.aspectj.lang.JoinPoint; import org.aspectj.lang.annotation.*; import org.springframework. ...