js+canvas制作前端验证码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>验证码</title>
</head> <body>
<canvas id="identify"></canvas>
<button id="changeCode">看不清，换一个</button>
</body>
<script type="text/javascript">
class IdentifyCode {
constructor(canvasId, width, height) {
this.width = width;
this.height = height;
this.canvas = document.querySelector(canvasId);
this.ctx = this.canvas.getContext("2d");
this.code = "";
this.codeRange = []; this.generateCodeRange();
this.freshCode();
} //
initCanvas() {
this.canvas.width = this.width;
this.canvas.height = this.height;
} // 生成随机色
randomColor() {
var colorStr = "#";
for(let i = 0; i < 6; i++) {
colorStr += Math.floor(Math.random() * 16).toString(16);
}
return colorStr;
} // 生成二维码字母范围
generateCodeRange() {
var codeRange = [];
for(let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
codeRange.push(String.fromCharCode(i));
}
for(let i = "a".charCodeAt(0); i <= "z".charCodeAt(0); i++) {
codeRange.push(String.fromCharCode(i));
}
for(let i = "0".charCodeAt(0); i <= "9".charCodeAt(0); i++) {
codeRange.push(String.fromCharCode(i));
}
this.codeRange = codeRange;
// return codeRange;
} // 生成四位随机数
randomCode() {
this.code = "";
var len = this.codeRange.length;
for(let i = 0; i < 4; i++) {
this.code += this.codeRange[Math.floor(Math.random() * len)];
}
} // 画背景色
drawBackground() {
var bgColor = "#b0aa93";
// console.log(bgColor)
this.ctx.rect(0, 0, this.width, this.height);
this.ctx.fillStyle = bgColor;
this.ctx.fill();
} // 画干扰线
drawDisturbLines() {
for(let i = 0; i < 4; i++) {
this.drawOneLine();
}
}
drawOneLine() {
var startX = Math.floor(Math.random() * this.width);
var startY = Math.floor(Math.random() * this.height);
var endX = Math.floor(Math.random() * this.width);
var endY = Math.floor(Math.random() * this.height);
this.ctx.strokeStyle = this.randomColor();
this.ctx.lineWidth = Math.ceil(Math.random() * 2);
this.ctx.beginPath();
this.ctx.moveTo(startX, startY);
this.ctx.lineTo(endX, endY);
this.ctx.closePath();
this.ctx.stroke();
} // 画干扰点
drawDisturbDots() {
for(let i = 0, count = this.width * this.height / 100; i < count; i++) {
this.drawOneDot();
}
}
drawOneDot() {
var ox = Math.floor(Math.random() * this.width);
var oy = Math.floor(Math.random() * this.height);
this.ctx.fillStyle = this.randomColor();
this.ctx.beginPath();
this.ctx.arc(ox, oy, 1, 0, 2 * Math.PI);
this.ctx.closePath();
this.ctx.fill();
} // 画文字(数字或字母)
drawLetters() {
for(let i = 0, len = this.code.length; i < len; i++) {
let offsetX = this.width * 0.15; // 中间的70%画字母，两边各15%
let offsetY = this.height * 0.15;
let lineHeight = this.height * 0.7;
let x = i * this.width * 0.7 / this.code.length + offsetX;
let y = this.height / 2;
let letter = this.code[i];
let fontSize = Math.min(parseInt(this.height), parseInt(this.width * 0.7));
//console.log(fontSize)
this.drawOneLetter(letter, x, y, fontSize);
}
}
drawOneLetter(letter, x, y, fontSize) {
this.ctx.font = fontSize + "px Times new roman";
this.ctx.textBaseline = "middle";
this.ctx.fillStyle = this.randomColor();
this.ctx.fillText(letter, x, y);
} // 更换一个验证码
freshCode() {
this.clear();
this.randomCode();
//console.log(this.code);
this.initCanvas();
this.drawBackground();
this.drawDisturbLines();
this.drawDisturbDots();
this.drawLetters();
} // 清除画布
clear() {
this.ctx.clearRect(0, 0, this.width, this.height);
}
}
</script>
<script type="text/javascript">
var identifyCode = new IdentifyCode("#identify", 100, 40);
console.log(identifyCode.code);
var changeCode = document.querySelector("#changeCode");
changeCode.onclick = function() {
identifyCode.freshCode();
console.log(identifyCode.code);
}
</script> </html>
使用方法：
1. new IdentifyCode("canvas的选择器","canvas的宽","canvas的高");
2. 将用户输入的验证码.toLowerCase()与identifyCode.code.toLowerCase()对比正误。
3. identifyCode.freshCode() 刷新验证码。
js+canvas制作前端验证码的更多相关文章
- canvas制作随机验证码
看到人家彩色背景的验证码想测试一下: 创建html代码: <canvas id="myCanvas" width="200" height="1 ...
- JS实现的一个验证码，可以在前端验证后在提交action
js实现的一个验证码功能,可以在前端判断验证码输入是否正确 输入的邮箱格式是否正确 验证成功后才提交action到后台 <!DOCTYPE html PUBLIC "-//W3C//D ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- Canvas制作的下雨动画
简介 在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...
- 酷！使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
- canvas实现随机验证码
canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...
随机推荐
- JavaScript实现继承的方式和各自的优缺点
ECMAscript只支持实现继承,主要是依靠原型链来实现的. JavaScript实现继承的方式: 类式继承 构造函数继承 组合继承 寄生组合式继承 1.类式继承 //类式继承 //声明父类 fun ...
- PHP实现git部署的方法，可以学学！
https://mp.weixin.qq.com/s/QFpKu8oKoxOEA1BmT7pNhg 在小站点上,直接用git来部署php代码相当方便,你的远程站点以及本地版本库都有一个版本控制,追 ...
- Java review-design pattern
Design Patterns (Factory, Abstract Factory, singleton, DAO, Proxy): 1. Factory: In Factory pattern, ...
- 使用 git 及 github
1.github 开户.创建项目 2.以下是本地操作: #初始本地库 git init#设置git的全局邮箱和用户名git config --global user.email "<e ...
- Git--版本管理的使用及理解
如果多人合作时,git也是需要中间交换服务器来解决冲突合并,这不还是集中式版本控制吗? 而svn不是也可以将所有源码下载到本机,然后在本机修改,保存在本机上,为什么这个不能说是分布式,提交的时候不也是 ...
- springmvc 视图解析器工作不正常
参考了如下 https://blog.csdn.net/typa01_kk/article/details/45902783 今天搭建了一个新的工程,从头开始搞的,处理完发现,能正常进入control ...
- springmvc java程序文件保存地址的路径问题
会保存为这种斜杠 不论之前填写的是什么样
- 2019.8.7 NOIP模拟测试14 反思总结
先扔代码 调完自闭网络流了,新一轮考试前看看能不能赶完…… 考得极其爆炸,心态也极其爆炸,真的是认识到自己能力上的不足 思维跑偏,代码能力差 就这样吧,再努力努力,不行就AFO T1旋转子段: 因为我 ...
- MobaXterm实时查看Linux服务器上的日志
一.工具 MobaXterm介绍 https://blog.csdn.net/juyin2015/article/details/79056687/ 1.,点击Session 输入服务器IP.用户名 ...
- Python 文件读写小结