注意:

真正项目中验证码图片都是由服务器端(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. Cpython-并发编程

    阅读目录 一 背景知识 二 python并发编程之多进程 三 python并发编程之多线程 四 python并发编程之协程 五 python并发编程之IO模型 六 补充:paramiko模块 七 作业 ...

  2. 用Tchromium替换webbrowser

    用Tchromium替换webbrowser 用惯了EmbeddedWB,不想换,但是IE内核一直存在内存泄漏问题,没办法,只有寻找替代品了. 要把用习惯的EmbeddedWB换成完全不一样的TChr ...

  3. HackerRank - powers-game-1 【博弈论】

    HackerRank - powers-game-1 [博弈论] 题意 给出 * 2^1 * 2^2 * 2^3 * 2^4 * 2^5 * 2^n 这一串东西 ,然后有两个玩家,*号是可以被替换掉的 ...

  4. Spring @Qualifier l转

    当候选 Bean 数目不为 1 时的应对方法 在默认情况下使用 @Autowired 注释进行自动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个.当找不到一个匹配的 Bean ...

  5. SpringBoot之Servlet、Filter、Listener配置

    在SpringBoot中是不需要配置web.xml的,那么原来在web.xml中配置的Servlet.Filter.Listener现在怎么弄呢? SpringBoot提供了三种Bean Filter ...

  6. SQL SERVER 索引中聚集索引分析和Transact-SQL语句优化

    一. 聚集索引B树分析1.聚集索引按B树结构进行组织的,索引B树种的每一页称为一个索引节点.B树的顶端节点称为根节点.  索引中的低层节点称为叶节点.根节点与叶节点之间的任何索引级别统称为中间级.在聚 ...

  7. div 文章内容自动分屏显示

    <head runat="server"> <title></title> <script language="javascri ...

  8. 读取Excel复杂的数据

    涉及到合并单元格的数据读取: package com.util; import org.apache.poi.ss.usermodel.*; import org.apache.poi.ss.util ...

  9. iOS基于XMPP实现即时通讯之一、环境的搭建

    移动端访问不佳,请访问我的个人博客 使用XMPP已经有一段时间了,但是一直都没深入研究过,只是使用SDK做一些简单的操作,看了许多大神的博客,自己总结一下,准备写一系列关于XMPP的使用博客,以便于自 ...

  10. docker 使用mysql

    mysql 5.7安装成功了,之前5.6一直报错不知道为什么 sudo docker run --name emall_mysql -e MYSQL_ROOT_PASSWORD=jbt1234 -e ...