canvas实现验证码
在通常的登录界面我们都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。
验证码一般用PHP和java等后端语言编写。
但是在前端，用canva或者SVG也可以绘制验证码。
绘制验证码不能是简单的随机字符串，而应该在绘制界面有一些干扰项：
如：干扰线段、干扰圆点、背景等等。
这里的这个demo的canvas验证码干扰项比较简单。
可以在图示中看到本例中的干扰项。
canvas验证码展示效果：
点击实现改变(重绘)验证码：
在控制台运行函数输出返回值(验证码)：
源码 ：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas验证码</title>
</head> <body>
<canvas width="200" height="60" id="check" style="border:1px solid #000;">您的浏览器不支持canvas标签！</canvas>
<script>
var ctx = document.getElementById("check").getContext("2d");
var ctxW = document.getElementById("check").clientWidth;
var ctxH = document.getElementById("check").clientHeight; /**
* 产生一个随机数 可设置随机数区间
* @param {[Number]} min [随机数区间下限]
* @param {[Number]} max [随机数区间上限]
* @return {[Number]} [返回一个在此区间的随机数]
*/
function ranNum(min, max) { return Math.random() * (max - min) + min; } /**
* 返回一个随机颜色 可设置颜色区间
* @param {[Number]} min [颜色下限]
* @param {[Number]} max [颜色上限]
* @return {[String]} [随机颜色]
*/
function ranColor(min, max) { var r = ranNum(min, max); var g = ranNum(min, max); var b = ranNum(min, max); // return "rgb(" + r + "," + g + "," + b + ")";
return `rgb(${r},${g},${b})`; } /**
* 随机字符串数组
* @return {[Array]} [随机数组]
*/
function ranStr() { var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789"; return str.split("").sort(function () {
return Math.random() - 0.5
}); } /**
* 绘制文本字符串
* @param {[String]} canvasId [canvas的id]
* @param {[Number]} canvasW [canvas的width]
* @param {[Number]} canvasH [canvas的height]
* @param {[Number]} num [绘制验证码的字数]
* @param {[Number]} fsMin [字体大小下限]
* @param {[Number]} fsMax [字体大小上限]
* @param {[Number]} frMin [字体旋转偏移下限]
* @param {[Number]} frMax [字体旋转偏移上限]
* @param {[Number]} min [颜色下限]
* @param {[Number]} max [颜色上限]
* @return {[String]} [随机字符串]
*/
function drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) { var str = ""; for (var i = 0; i < num; i++) { var char = ranStr()[Math.floor(0, ranStr().length)]; var fs = ranNum(fsMin, fsMax); canvasId.font = fs + "px Verdana"; canvasId.fillStyle = ranColor(min, max); // 保存绘制的状态
canvasId.save(); // context.translate(x,y);
// x 添加到水平坐标（x）上的值
// y 添加到垂直坐标（y）上的值
// 偏移
canvasId.translate(canvasW / num * i + canvasW / 20, 0); // 变换角度
canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180); // context.fillText(text,x,y,maxWidth);
// text 规定在画布上输出的文本。
// x 开始绘制文本的 x 坐标位置（相对于画布）。
// y 开始绘制文本的 y 坐标位置（相对于画布）。
// maxWidth 可选。允许的最大文本宽度，以像素计。
canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num); // 返回之前保存过的路径状态和属性
ctx.restore(); str += char; } // console.log(str);
return str; } /**
* 绘制背景
* @param {[String]} canvasId [canvas的id]
* @param {[Number]} canvasW [canvas的width]
* @param {[Number]} canvasH [canvas的height]
* @param {[Number]} min [下限]
* @param {[Number]} max [上限]
*/
function drawBg(canvasId, canvasW, canvasH, min, max) { // 绘制canvas背景
canvasId.fillStyle = ranColor(min, max); // 填充颜色
canvasId.fillRect(0, 0, canvasW, canvasH); } /**
* 绘制干扰 圆点
* @param {[String]} canvasId [canvas的id]
* @param {[Number]} canvasW [canvas的width]
* @param {[Number]} canvasH [canvas的height]
* @param {[Number]} num [绘制的数量]
* @param {[Number]} r [圆点半径]
* @param {[Number]} min [下限]
* @param {[Number]} max [上线]
*/
function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) { for (var i = 0; i < num; i++) { // 开始绘制 （拿起笔）
canvasId.beginPath(); // context.arc(x,y,r,sAngle,eAngle,counterclockwise); （绘制）
// x 圆的中心的 x 坐标。
// y 圆的中心的 y 坐标。
// r 圆的半径。
// sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
// eAngle 结束角，以弧度计。
// counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI); // 填充颜色
canvasId.fillStyle = ranColor(min, max); // 填充
canvasId.fill(); // 闭合绘制 （放开笔）
canvasId.closePath(); } } /**
* 绘制干扰 线段
* @param {[String]} canvasId [canvas的id]
* @param {[Number]} canvasW [canvas的width]
* @param {[Number]} canvasH [canvas的height]
* @param {[Number]} num [绘制的数量]
* @param {[Number]} min [下限]
* @param {[Number]} max [上线]
*/
function drawLine(canvasId, canvasW, canvasH, num, min, max) { for (var i = 0; i < num; i++) { // 开始绘制 （拿起笔）
canvasId.beginPath(); // 绘制开始点
canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH)); // 绘制结束点
canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH)); canvasId.strokeStyle = ranColor(min, max); canvasId.stroke(); canvasId.closePath(); } } // 绘制验证码
function drawCanvas() { // 清空canvas
ctx.clearRect(0, 0, 200, 60); // 绘制背景
drawBg(ctx, ctxW, ctxH, 200, 255); // 绘制干扰圆点
drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255); // 绘制干扰线段
drawLine(ctx, ctxW, ctxH, 20, 0, 255); // 绘制验证码
var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100); return str; } drawCanvas(); document.getElementById('check').onclick = drawCanvas;
</script>
</body> </html>
canvas实现验证码的更多相关文章
- 用canvas绘制验证码
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...
- android 开发 View _12_ 用Canvas 绘制一张图片（博客中演示用Canvas画验证码图片）
package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; impo ...
- canvas实现验证码功能
我们在做一些后台系统登录功能的时候,一般都会用到验证码,最多的就是后台生成的验证码图片返回给前端的.也可以不调用后端接口,前端使用canvas直接生成验证码. 由于功能过于简单,不需要多少代码和文字说 ...
- canvas 绘制验证码
注意: 真正项目中验证码图片都是由服务器端(PHP.JSP.Node.js)技术来生成. 最终效果: 代码: <!DOCTYPE html> <html> <head l ...
- canvas绘制验证码
css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> body中添加标签 ...
- captcha.js一个生成验证码的插件，使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
- Android下实现手机验证码
Android实现验证码 效果图 Github地址 地址:https://github.com/kongqw/Android-CheckView 使用 <kong.qingwei.demo.kq ...
- JavaScript随机验证码
利用canvas制作一个随机验证码: 1.clearRect:context.clearRect(x,y,width,height);清空给定矩形内的指定像素 2.fillStyle:设置画笔的颜色 ...
- android 开发 View _1_ View的子类们 和 视图坐标系图
目录: android 开发 View _2_ View的属性动画ObjectAnimator ,动画效果一览 android 开发 View _3_ View的属性动画ValueAnimator a ...
随机推荐
- Mac OS X 恢复 VMware Fusion 虚拟机中的 vmdk 文件
今天手贱把 VMware Fusion 虚拟机中的 Windows 10 搞挂了,原因是磁盘清理了下,然后重启就蓝屏了,Windows 10 自动修复.手动还原.手动重置系统,试过都不行,恢复系统是没 ...
- DRF 商城项目 - 日志处理
logging 模块 logging 模块是最基本的日志处理模块 缺陷 但是拥有一些很致命的缺陷 要求用户主动查询, 需要登录到服务器才可以查看日志文件 自带的报错外部通知也没办法判断同类取舍, 短 ...
- boost::bind 实现原理, 手动实现一个
template<typename R, typename T, typename A1> class hangj_call { public: hangj_call(R (T::*f_) ...
- Spring Caching集成Ehcache
Ehcache可以对页面.对象.数据进行缓存,同时支持集群/分布式缓存.在应用中用于常常需要读取的数据交换,而不是通过DB DAO数据交换(cache不占用DB宝贵的NIO,直接交换堆内存). 整合S ...
- Servlet-生命周期简介
Servlet生命周期可分为5个步骤 加载Servlet.当Tomcat第一次访问Servlet的时候,Tomcat会负责创建Servlet的实例 初始化.当Servlet被实例化后,Tomcat会调 ...
- Base 64 加密、解密
1.写一个公共类 package com.boyutec.oss.sys.utils; import java.io.UnsupportedEncodingException; import java ...
- 第三章 服务治理：Spring Cloud Eureka
Spring Cloud Eureka是Spring Cloud Netflix 微服务套件中的一部分,它基于Netflix Eureka做了二次封装,主要负责完成微服务架构中的服务治理功能.Spri ...
- Android中内容提供者ContentProvider的详解
1.什么是ContentProvider 首先,ContentProvider(内容提供者)是android中的四大组件之一,但是在一般的开发中,可能使用的比较少. ContentProvider为不 ...
- Android_注解+反射代替findViewById()
最近没啥事,前段时间看到一个框架是使用的注解来代替findViewById()的然后就研究了,发现还是蛮容易的,下面就是注解的代码: import java.lang.annotation.Docum ...
- PHP-CPP开发扩展（三）
PHP-CPP是一个用于开发PHP扩展的C++库.本节讲解PHP函数形参相关的实现. 指定函数参数类型 有时候,我们需要指定函数的形参是数组或者指定的,那么在PHP-CPP里是否可以指定函数的参数类型 ...