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()转小写 ...
随机推荐
- Hackerrank--Stock Maximize(DP Practice)
题目链接 Your algorithms have become so good at predicting the market that you now know what the share p ...
- poj1160 动态规划
#include<stdio.h> #include<string.h> #define INF 999999999 #define Min(x,y) (x<y?x:y) ...
- unity限帧的正确姿势
首先 unity上面要做一下手脚 打开后如下 接着.... 在Inspector面板 把V Sync Count 设置为不限制(Don`t Sync)(我们用脚本限制,不然unity自己控制不了它自己 ...
- 2019.8.13 NOIP模拟测试19 反思总结
最早写博客的一次∑ 听说等会儿还要考试[真就两天三考啊],教练催我们写博客… 大约是出题最友好的一次[虽然我还是炸了],并且数据也非常水…忽视第三题的锅的话的确可以这么说.但是T3数据出锅就是你的错了 ...
- CentOS安装fortune+cowsay
1.先找下看有没 2.安装 yum -y install fortune-mod 3.执行fortune 应该可以输出了,接着去弄中文词库,阮一峰的: git clone git@github.com ...
- 100个常用的原生JavaScript函数
1.原生JavaScript实现字符串长度截取 复制代码代码如下: function cutstr(str, len) { var temp; var icount = 0; var ...
- 2019阿里云开年Hi购季新用户分会场全攻略！
2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...
- 模拟4题解 T1礼物
T1 题目描述 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生 日礼物. 商店里一共有种礼物.夏川每得到一种礼物,就会获得相应喜悦值Wi(每种 礼物的喜悦值不能重复获得). 每次, ...
- 解决WSL上运行plantUML中文乱码问题
生成UML图命令: java -jar plantuml.jar -charset UTF-8 my.txt 1. 保证my.txt 使用uft-8编码 2. wsl中安装中文字体: 如: sudo ...
- simple 单例
Message* Message::m_pInstance = ;//类外初始 Message::Message() { } Message::~Message() { ) { delete Inst ...