基于canvas制作随机生成数字英文组合验证码效果,点击或刷新会自动重组。输入验证码提交验证效果代码。

     <div class="verification">
<input type="text" value="" placeholder="请输入验证码(不区分大小写)" id="verInput">
<canvas id="verCanvas" width="80" height="28"></canvas>
<button id="verSubmit" onclick="verify()">提交</button>
</div> <script type="text/javascript" src="makeCode.js"></script>
<script type="text/javascript">
var verCanvas = document.getElementById("verCanvas");
var verValue = makeCode(verCanvas);
verCanvas.onclick = function(){
verValue = makeCode(verCanvas);
};
function verify(){
var value = document.getElementById("verInput").value;
if(value.toLowerCase()==verValue){
alert("验证成功")
}else{
alert("验证失败")
}
}
</script>
function makeCode(canvas, codeLenght) {
codeLenght = codeLenght || 4; //默认4个字符
var valueArr = [];
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var context = canvas.getContext("2d");
context.clearRect(0,0,canvasWidth,canvasHeight);
//设置所有可能出现的字符
var codeLib = ["A", "B", "C", "E", "F", "G", "H", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "a", "b", "c", "d", "e", "f", "h", "k", "m", "n", "p", "r", "s", "t", "w", "x", "y", "z", "3", "4", "5", "6", "8"];
var codeLibLength = codeLib.length;
for (var i = 0; i < codeLenght; i++) {
// 获得随机字符
var txt = codeLib[parseInt(Math.random() * codeLibLength)];
valueArr.push(txt.toLowerCase());
//产生-20~20之间的随机弧度
var deg = (Math.random() * 40-20) * Math.PI / 180;
//文字在canvas上的坐标位置
var x = (canvasWidth / (codeLenght + 1)) * (i + 0.5);
var y = Math.random()*(canvasHeight*1/5)+(canvasHeight*7/10);
//字体设置
var fontSize = canvasHeight*3/4;
context.font = "bold " + fontSize + "px 微软雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = "rgb("+parseInt(Math.random()*200)+","+parseInt(Math.random()*200)+","+parseInt(Math.random()*200)+")";
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
//验证码上显示线条
for (var i = 0; i<5; i++) {
context.strokeStyle = "rgb("+parseInt(Math.random()*100+155)+","+parseInt(Math.random()*100+155)+","+parseInt(Math.random()*100+155)+")";
context.beginPath();
context.moveTo(Math.random() * canvasWidth, Math.random() * canvasHeight);
context.lineTo(Math.random() * canvasWidth, Math.random() * canvasHeight);
context.stroke();
}
//验证码上显示小点
for (var i = 0; i <= 24; i++) {
context.strokeStyle = "rgb("+parseInt(Math.random()*100+155)+","+parseInt(Math.random()*100+155)+","+parseInt(Math.random()*100+155)+")";
context.beginPath();
var x = Math.random() * canvasWidth;
var y = Math.random() * canvasHeight;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
//返回当前验证码的值
return valueArr.join("");
}

canvas验证码 - 随机字母数字的更多相关文章

  1. 007-TreeMap、Map和Bean互转、BeanUtils.copyProperties(A,B)拷贝、URL编码解码、字符串补齐,随机字母数字串

    一.转换 1.1.TreeMap 有序Map 无序有序转换 使用默认构造方法: public TreeMap(Map<? extends K, ? extends V> m) 1.2.Ma ...

  2. java实现随机字母数字验证码

    生成随街验证码 VerifyCode 工具类 package com.meeno.common.cerifycode; import javax.imageio.ImageIO; import jav ...

  3. php生成纯数字、字母数字、图片、纯汉字的随机数验证码

    现在讲开始通过PHP生成各种验证码旅途,新手要开车了,请刷卡! 首先,我们开始先生成一个放验证码的背景图片 注:没有Imagejpg()这个函数,只有imagepng()函数 imagecreatet ...

  4. JS生成随机的由字母数字组合的字符串

    前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法   1 Math.random().toString(36).substr( ...

  5. js随机生成字母数字组合的字符串 随机动画数字

    效果描述: 附件中只有一个index.html文件有效 其中包含css以及html两部分内容 纯js生成的几个随机数字 每次都不重复,点击按钮后再次切换 使用方法: 1.将css样式引入到你的网页中 ...

  6. 使用JavaScript随机生成数字混合字母的验证码

      <script> // 封装一个随机生成数字的函数 function random(a, b) { var n = Math.round(Math.random() * (a - b) ...

  7. canvas实现随机验证码

    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...

  8. canvas制作随机验证码

    看到人家彩色背景的验证码想测试一下: 创建html代码: <canvas id="myCanvas" width="200" height="1 ...

  9. PHP字母数字验证码和中文验证码

    1:字母数字组合的验证码 HTML代码: 验证码:<input type="text" name="code"> <img onclick=& ...

随机推荐

  1. POJ 1243

    #include <iostream> #include <algorithm> #include <cmath> #define MAXN 50 using na ...

  2. css网页布局 --- 左边固定,右边自适应

    div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...

  3. Linux驱动:SPI驱动编写要点

    题外话:面对成功和失败,一个人有没有“冠军之心”,直接影响他的表现. 几周前剖析了Linux SPI 驱动框架,算是明白个所以然,对于这么一个庞大的框架,并不是每一行代码都要自己去敲,因为前人已经把这 ...

  4. EF基础知识小记七(拆分实体到多个表以及拆分表到多个实体)

    一.拆分实体到多个表 1.在日常开发中,会经常碰到一些老系统,当客户提出一些新的需求,这些需求需要在原来的表的基础上加一些字段,大多数人会选择通过给原表添加字段的方式来完成这些需求,方法,虽然可行,但 ...

  5. 前端知识概述----公司内部的一次分享 分类: JavaScript HTML+CSS 2015-04-16 21:24 2593人阅读 评论(2) 收藏

    因为公司内部一个纯后端团队要做一些适合自己团队的web页面,所以就有了这次分享.知识都是很基础,有的知识也只是做了解简单介绍.主要是想让大家对前端有一个基本的了解.现在做一个总结.欢迎大家拍砖. 知识 ...

  6. 数据库应用(Mysql、Mongodb、Redis、Memcached、CouchDB、Cassandra)

    目前,主流数据库包括关系型(SQL)和非关系型(NoSQL)两种. 关系数据库是建立在关系模型基础上的数据库,借助于集合代数等数学概念和方法来处理数据库中的数据,支持复杂的事物处理和结构化查询.代表实 ...

  7. C#中的Dictionary类,默认key是区分大小写的

    在C#中定义一个Dictionary Dictionary<string,string> dictionary = new Dictionary<string,string>( ...

  8. Selenium私房菜系列4 -- Selenium IDE的使用

    (转自http://www.cnblogs.com/hyddd/archive/2009/05/24/1487967.html) 前面说过,Selenium IDE是Firefox的一个插件,是可以进 ...

  9. JAVA 导出 Excel, 将Excel下载到本地

    昨天说了如何将数据导出成 excel 的两种方式,今天完善一下将 java 导出(文件在服务器)并下载到本地 1. 触发导出 ajax 代码 $.ajax({ type: "POST&quo ...

  10. Node.js中setTimeout和setInterval的使用

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInter ...