用canvas绘制验证码
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破。
验证码一般用PHP和java等后端语言编写;
但是在前端,用canva或者SVG也可以绘制验证码;
让我们先来看一个简单的但是有点丑的验证码:
绘制验证码的关键点:选取的四个字符随机、字体的颜色、旋转角度随机、其中有五条线和50个随机的小点来干扰;
步骤:
画浅色背景
画随机文字
画5条干扰线
画100条干扰点(半径为1的圆)
1.新建一个函数产生随机数
//1.新建一个函数产生随机数
function rn(min,max){
return parseInt(Math.random()*(max-min)+min);
}
2.新建一个函数产生随机的颜色
//2.新建一个函数产生随机颜色
function rc(min,max){
var r=rn(min,max);
var g=rn(min,max);
var b=rn(min,max);
return `rgb(${r},${g},${b})`;
}
3.填充背景颜色,背景颜色要浅一点
var w=120;
var h=40;
var ctx=c1.getContext("2d");
ctx.fillStyle=rc(180,230);
ctx.fillRect(0,0,w,h);
4.随机产生字符串
//4.随机产生字符串
var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
for(var i=0;i<4;i++){
var c=pool[rn(0,pool.length)];//随机的字
var fs=rn(18,40);//字体的大小
var deg=rn(-30,30);//字体的旋转角度
ctx.font=fs+'px Simhei';
ctx.textBaseline="top";
ctx.fillStyle=rc(80,150);
ctx.save();
ctx.translate(30*i+15,15);
ctx.rotate(deg*Math.PI/180);
ctx.fillText(c,-15+5,-15);
ctx.restore();
}
5.随机产生5条干扰线
//5.随机产生5条干扰线,干扰线的颜色要浅一点
for(var i=0;i<;i++){
ctx.beginPath();
ctx.moveTo(rn(0,w),rn(0,h));
ctx.lineTo(rn(0,w),rn(0,h));
ctx.strokeStyle=rc(180,230);
ctx.closePath();
ctx.stroke();
}
6.随机产生40个干扰的小点
//6.随机产生40个干扰的小点
for(var i=0;i<;i++){
ctx.beginPath();
ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
ctx.closePath();
ctx.fillStyle=rc(150,200);
ctx.fill();
}
7.完整源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{text-align: center}
canvas{border:1px solid greenyellow}
</style>
</head>
<body>
<h1>canvas绘制验证码</h1>
<canvas width="120" height="40" id="c1">
</canvas>
<script>
//1.新建一个函数产生随机数
function rn(min,max){
return parseInt(Math.random()*(max-min)+min);
}
//2.新建一个函数产生随机颜色
function rc(min,max){
var r=rn(min,max);
var g=rn(min,max);
var b=rn(min,max);
return `rgb(${r},${g},${b})`;
}
//3.填充背景颜色,颜色要浅一点
var w=120;
var h=40;
var ctx=c1.getContext("2d");
ctx.fillStyle=rc(180,230);
ctx.fillRect(0,0,w,h);
//4.随机产生字符串
var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
for(var i=0;i<4;i++){
var c=pool[rn(0,pool.length)];//随机的字
var fs=rn(18,40);//字体的大小
var deg=rn(-30,30);//字体的旋转角度
ctx.font=fs+'px Simhei';
ctx.textBaseline="top";
ctx.fillStyle=rc(80,150);
ctx.save();
ctx.translate(30*i+15,15);
ctx.rotate(deg*Math.PI/180);
ctx.fillText(c,-15+5,-15);
ctx.restore();
}
//5.随机产生5条干扰线,干扰线的颜色要浅一点
for(var i=0;i<5;i++){
ctx.beginPath();
ctx.moveTo(rn(0,w),rn(0,h));
ctx.lineTo(rn(0,w),rn(0,h));
ctx.strokeStyle=rc(180,230);
ctx.closePath();
ctx.stroke();
}
//6.随机产生40个干扰的小点
for(var i=0;i<40;i++){
ctx.beginPath();
ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
ctx.closePath();
ctx.fillStyle=rc(150,200);
ctx.fill();
}
</script>
</body>
</html>
用canvas绘制验证码的更多相关文章
- canvas 绘制验证码
注意: 真正项目中验证码图片都是由服务器端(PHP.JSP.Node.js)技术来生成. 最终效果: 代码: <!DOCTYPE html> <html> <head l ...
- 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 ...
随机推荐
- 使你的WebService可以远程调试点击“调用”
默认发布webservice时,只有在本机访问某个方法时可以点击调用,如果有参数时,也可以输入参数值,但是如果是远程访问时,点击进入一个服务时,是不显示“调用”和输入参数框的. 原来web.confi ...
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- mysql 随机获取一条或多条数据
若要在i ≤r≤ j 这个范围得到一个随机整数r ,需要用到表达式 FLOOR( RAND() * (j – i)+i),RLOOR()取整树部分,RAND()生成0~1的随机数.ROUND(x,n) ...
- Windows下 OpenSSL的安装与简单使用
1. openssl的最新版本 最新版本是 openssl1.1.1 官方地址 https://www.openssl.org/source/ TLS1.3的协议(RFC8446)在2018.8.12 ...
- Python fullstack系列【1】:初识Python
Python简介 Python的前世今生: Python诞生于1989年的圣诞节期间,其作者是吉多·范罗苏姆(Guido van Rossum).当时Guido(江湖人称龟叔)在阿姆斯特丹度假时着手开 ...
- SpringBoot(九)_springboot集成 MyBatis
MyBatis 是一款标准的 ORM 框架,被广泛的应用于各企业开发中.具体细节这里就不在叙述,大家自行查找资料进行学习下. 加载依赖 <dependency> <groupId&g ...
- how to disabled iframe page open new window / new tab
how to disabled iframe page open new window / new tab 禁用 iframe 中的页面打开新页面 <!DOCTYPE html> < ...
- Nim游戏学习笔记
- Hashtable 和 HashMap 以及 ConcurrentHashMap
备忘: ConcurrentHashMap与Hashtable的区别: Hashtable中采用的锁机制是一次锁住整个hash表,从而同一时刻只能由一个线程对其进行操作:而ConcurrentHash ...
- hdu 5195 DZY Loves Topological Sorting (拓扑排序+线段树)
DZY Loves Topological Sorting Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 ...