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()转小写 ...
随机推荐
- Vue.extend用法
Vue.extend 是构造一个组件的语法器. 用法 Vue.extend ( options ),options 是对象: 使用基础Vue构造器,创建一个子类,参数是一个包含组件选项的对象,data ...
- HDU3486 RMQ
/*多么变态的一道题,交了18次*/ #include<cstdio> #include<cstring> #include<cmath> #define max( ...
- stackless 安装
1.下载源码 https://bitbucket.org/stackless-dev/stackless/wiki/Download 2.编译.安装.路径生效 apt-get install libr ...
- Swift 和 Objective-C 混编后对ipa包大小的影响
https://my.oschina.net/ilrrong/blog/800923 最近用Swift对以前写的一个应用进行重写,使用了Swift和Objective-C的混编,提交审核后发现比以前大 ...
- day38 03-Spring的IOC和DI的区别
在IOC中有一个DI的概念. IOC是控制反转,DI是依赖注入.现在编写的类里面是没有其他的属性的.如果你学过像UML设计的话, 电视没有遥控器,按按钮也可以,但是紧密的那种,像人和四肢,人如果没有了 ...
- Python实例 复制文件
import shutil import os import os.path src = " d:\\download\\test\\myfile1.txt " dst = ...
- Flask – SQLAlchemy成员增加
目录 简介 结构 展示 技术 运行 代码 创建数据库表单 views视图 home主页 添加成员addnew.html 展示页show_all 简介 结构 $ tree -I "__pyca ...
- 30分钟学webpack实战
阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解babel-loader加载器的含义 六:了 ...
- 2018.8.10 提高B组模拟赛
T1 阶乘 Time Limits: 1000 ms Memory Limits: 262144 KB Detailed Limits Goto ProblemSet Description 有n个正 ...
- web前端学习（二）html学习笔记部分（11）-- 没有标号记录的知识合集
这一部分内容相对比较简单,就不按规矩排序了.(主要是网站上也没有这一部分内容的排序) 1. html5的 非主体结构元素 学习笔记(1)里面记录过. 2. html5表单提交和PHP环境搭建 1. ...