canvas 绘制验证码
注意：
真正项目中验证码图片都是由服务器端(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 绘制验证码的更多相关文章
- 用canvas绘制验证码
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...
- canvas绘制验证码
css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> body中添加标签 ...
- canvas实现验证码
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SV ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 通过GDI+绘制 验证码
只为了记录下自己的学习历程,方便日后查看 现在开始言归正传,以下为其完整代码附上 using System; using System.Collections.Generic; using Syste ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
随机推荐
- Linux开发工具教程
今天把上个星期写的Linux开发工具相关的教程整理一下,方便阅读: 1.第一课 GCC入门: 2.第二课 GCC入门之静态库以及共享库: 3.第三课 Makefile文件的制作(上) : 4.第四课 ...
- 【Head First Servlets and JSP】笔记23：Expression Language(EL) 完全攻略
基本上是<Head First Servlets and JSP>内容的整理.扩充.顺便推荐一个供参考的JSP教程:JSP Tutorial内容很全面,还有一些有趣的实例. 完整代码参考 ...
- vue2.0过度动画
vue在插入.更新或移除dom时,提供了多种不同方式的应用过度效果. 包括以下工具: 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库,如animate.css 在过渡钩子函数 ...
- java类执行顺序
1. 静态初始化块 > 初始化块 > 构造器 2. 父类 > 子类 综合下来顺序就是: 父类静态初始化块和静态成员变量 子类静态初始化块和静态成员变量 父类初始化块和普通成员变量 父 ...
- 行列转换文本处理--awk xargs 回顾
awk 数组回顾: 9.1 数组 举例:统计当前主机上每一个TCP连接状态以及每种连接状态的数目[非常实用] # netstat -tan | awk '/^tcp/{STATE[$NF]++}END ...
- 关于camera 构架设计的一点看法
camera的构架目前来看有两种,一种是集中式管理,比如说建立一个引擎,引擎向上提供接口,向下管理所有模块.把camera的所有功能划分为不同的模块,又引擎统一管理.模块的结构就比较随意了,可以统一接 ...
- 在Kotlin中 使用js 函数
在Kotlin中 使用js 函数 import javax.script.Invocable import javax.script.ScriptEngineManager fun main(args ...
- IDEA 编译时 未结束的字符串文字
这个问题就是编码的问题,修改文件的编码可以解决 1. IDEA中 file-->Settings 找到File Encodings,将IDE Encoding.Project Encodin ...
- make install报错
今天,在运行公司内核的机器上,编译标准内核,结果提示: 问题原因: 原来安装新内核的时候,会与原内核比较,如果缺少了某些模块,就会提示”ERROR: modinfo: could not find m ...
- windows开dump
右键计算机—>属性—>高级系统设置——>设置——点击高级—>更改——>自定义大小(1024~2048)——设置保存