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()转小写 ...
随机推荐
- php静态变量问题
<?php$a=0; function test(){ static $a=0; $a+=1; echo $a; }test(); test(); ?>1.static是与销毁时间有关,与 ...
- iframe调用父页面各种方法
HTML: <body> <form id="form1" runat="server"> <div> & ...
- Markdown文档使用
Markdown使用 一.markdown标题:1级-6级 一级 #空格 二级 ##空格 三级 ###空格 ... 六级 ######空格 二.代码块 print("hello world! ...
- 易语言调用外部DLL详细实例教程
一.准备工作 一.工具:易语言 二.准备一个DLL 1)打开易语言-新建一个Windows动态链接库 2)然后右键新建一个子程序或者用快捷键:Ctrl+N .然后写上代码.我这里写一个 2个字符串拼接 ...
- python基础--反射、元类、单例设计模式
反射:reflect,反射指的是一个对象应该具备可以检测.修改.增加自身属性的能力,反射就是通过字符串操作属性 hasattr(对象,带查询的属性名称) 判断某个对象中是否存在某个属性 getattr ...
- 2019.10.21 csp-s模拟测试81 反思总结
T1: 把每一行状压,按行DP.设fi,j,k,i表示第几行,j是当前行的1覆盖状态,k是当前行选择按钮的状态.转移的时候枚举j和k,再枚举下一层的按钮选择情况l.如果l和j可以全覆盖当前层则转移合法 ...
- Redhat/Fedora 或类似系统， 配置网络的工具介绍
在Redhat早期的版本中, 有linuxconf .redhat-config-network .netconfig 等工具: 在Redhat/Fedora 最新的版本有 system-config ...
- Django与HTML业务基本结合--基本的用户名密码提交方法2
from django.shortcuts import render # Create your views here. from django.shortcuts import render de ...
- 洛谷3128 [USACO15DEC]最大流Max Flow——树上差分
题目:https://www.luogu.org/problemnew/show/P3128 树上差分.用离线lca,邻接表存好方便. #include<iostream> #includ ...
- arcgis访问百度地图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...