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 ...
随机推荐
- python基础（数字、字符串、布尔值、字典数据类型简介）
一 执行第一个python程序 1.下载安装python2.7和python3.6的版本及pycharm,我们可以再解释器中输入这样一行代码: 则相应的就打出了一句话.这里的print是打印的意思.你 ...
- selenium的下拉选择框
今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...
- 覆盖bootstrap的样式
覆盖bootstrap的样式,很简单.在css中加上 !important 来更改自己样式的执行优先级!
- JavaScript：隐藏Url中的参数
<script type="text/javascript"> function submitForm(url, data) { var eleForm = docum ...
- SqlHelper简单实现（通过Expression和反射）4.对象反射Helper类
ObjectHelper的主要功能有: 1.通过反射获取Entity的实例的字段值和表名,跳过自增键并填入Dictionary<string,string>中. namespace RA. ...
- $python正则表达式系列（6）——"或"表达式的用法
import re s1 = u'距离地铁5号线189米' s2 = u'距离地铁5号线(环中线)189米' s3 = u'距离地铁5号线(环中线)189米' p1 = re.compile(u'号线 ...
- Chrome浏览器快捷键
Chrome窗口和标签页快捷键:Ctrl+N 打开新窗口 Ctrl+T 打开新标签页 Ctrl+Shift+N 在隐身模式下打开新窗口 Ctrl+O,然后选择文件 在谷歌浏览器中打开计算机上的文件 按 ...
- Java：判断字符串中包含某字符的个数
Java:判断字符串中包含某字符的个数 JAVA中查询一个词在内容中出现的次数: public int getCount(String str,String key){ if(str == null ...
- centos上mailx通过465端口发送邮件
最近在看zabbix发送邮件的时候,发现自己的邮件总是无法发送,这里可能是外网防火墙禁止25端口,那么如何绕过25端口呢? 我使用的是163邮箱的TSL加密协议465端口 由于mailx基本配置很简 ...
- git常用的语句
下面总结出开发中常用的指令: 1.git init:初始化git仓库 2.git add 文件名:把文件添加到暂存区中 3.git commit -m "提交信息":提交暂存区内容 ...