实现canvas简单的验证码

首先,canvas:固定在浏览器上的画布,浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。
canvas为我们敞开了新一扇大门。
属于HTML5中新增的一个标签,看起来与其他标签区别不大,在验证码之前,应该学习canvas相关API,

本次用到的canvas方法
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
fillRect() 绘制“被填充”的矩形
stroke() 绘制已定义的路径
moveTo() 把路径移动到画布中的指定点,不创建线条
lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
arc() 创建弧/曲线(用于创建圆形或部分圆)
font 设置或返回文本内容的当前字体属性

var canvas = document.querySelector("#canvas");
console.log(canvas);
var cxt = canvas.getContext(‘2d‘);//绘图上下文环境

//绘制验证码图片
draw();
canvas.onclick = function(){
// console.log(‘1‘);
draw();
};
function draw(){
// 绘制一个颜色随机的矩形
cxt.beginPath();
cxt.fillStyle = randColor(170,250);//把颜色放到一个方法
cxt.fillRect(0,0,120,30);
cxt.closePath();
var data = ‘abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ0123456789‘;
for(var i = 0; i <= 90; i +=30){//四位验证码
var c = data[randNum(0,data.length - 1)];
cxt.beginPath();
cxt.fillStyle = randColor(60,160);
cxt.font = randNum(15,40) + ‘px SimHei‘;
cxt.fillText(c, i + randNum(0,15),randNum(15,30));//[0,15) [30,45) [60,75) [90,115)
cxt.closePath();
}
//渲染干扰线
for(var j = 0; j < 10; j ++){
cxt.beginPath();
cxt.moveTo(randNum(0,120), randNum(0,120));//这里的randNum(min,max)与canvas的画板宽高相联系,
cxt.lineTo(randNum(0,120), randNum(0,120));
cxt.strokeStyle = randColor(60,120);
cxt.stroke();
}
for(var i = 0; i < 10; i ++){
cxt.beginPath();
cxt.strokeStyle = randColor(50,130);
cxt.arc(randNum(0,120),randNum(0,30),randNum(1,3),0,2*Math.PI);
cxt.stroke();
cxt.closePath();
}
}
function randColor(min,max){//max+1是取不到的,但是max是可以取到的,所以向下取整刚好取到[min,max]。
var r = Math.floor(Math.random()*(max-min + 1)+min);//Math.random * (max- min)==>[o,min)变成[min,max-min]的范围
var g = Math.floor(Math.random()*(max-min + 1)+min);
var b = Math.floor(Math.random()*(max-min + 1)+min);
return ‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘;
}

function randNum(min,max){
var num = Math.floor(Math.random()*(max-min + 1)+min);
return num;
console.log(num);
}

原文地址:https://www.cnblogs.com/rakinda/p/10875142.html

时间: 2024-11-09 00:34:44

实现canvas简单的验证码的相关文章

简单制作验证码和绘制图片

今天仍然是完善一般处理程序小项目,但是昨天小小的项目已经终结,今天只是完善一下新的样式罢啦,嘿嘿,我们通常在网上浏览图片时间都会看到图片上面呈现有水印字体的样式,其实这些图片都是通过一些简单的小技术来修饰的:另外我们现在在网上随处可见注册页面,当我们想在一个网站上面注册新的用户时间,需要注册完信息以后填写随机生成的验证码,或者我们想要登录一个网站时间也需要验证码的填写,由此可见,验证码也是我们程序员需要必备的小技术哦,下面就来总结一下这两项小功能的实现. 一.图片上的水印字体 我们可以看到第一张

解析最简单的验证码

最近在学python,正好遇到学校需要选宿舍,就用python写了一个抢宿舍的软件.其中有一个模块是用来登陆的,登陆的时候需要输入验证码,不过后来发现了直接可以绕过验证码直接登陆的bug.不过这是另外的话题,开始的时候我并没有发现这个隐藏起来的秘密,所以我就写了这个python代码段用来实现解析验证码的功能. 我们学校的验证码是最简单的验证码,形式大概如下: 其中这个图片的大小是60X24像素的,大概每个数字的大小是15X24像素. 观察这个验证码之后可以发现,验证码中只有数字而且数字的字体很规

学习笔记:利用GDI+生成简单的验证码图片

小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=ohmepe03 学习笔记:利用GDI+生成简单的验证码图片 1 /// <summary> 2 /// 单击图片时切换图片 3 /// </summary> 4 /// <param name="sender">&

java实现生成简单图片验证码

原文:java实现生成简单图片验证码 源代码下载地址:http://www.zuidaima.com/share/1550463428840448.htm 项目载图: 该项目要转换为Dynamic web project http://www.zuidaima.com/blog/1618162161323008.htm 另外缺少jar包: http://www.zuidaima.com/jar/search/jstl-1.0.1.htm http://www.zuidaima.com/jar/s

【验证码】使用Tesseract实现简单的验证码识别

1.Tesseract介绍: Tesseract的OCR引擎最先由HP实验室于 1985年开始研发,至1995年时已经成为OCR业内最准确的三款识别引擎之一.然而,HP不久便决定放弃OCR业务,Tesseract也从此尘封. 数年以后,HP意识到,与其将Tesseract束之高阁,不如贡献给开源软件业,让其重焕新生--2005年,Tesseract由美国内华达州信息技 术研究所获得,并求诸于Google对Tesseract进行改进.消除Bug.优化工作. 2.下载 Tesseract: http

PHP中最简单的验证码

create_code.php <?php session_start(); //生成验证码图片 header("Content-type: image/png"); // 全数字 $str = "1,2,3,4,5,6,7,8,9,a,b,c,d,f,g"; //要显示的字符,可自己进行增删 $list = explode(",", $str); $cmax = count($list) - 1; $verifyCode = ''; fo

ASP.NET 如何做出简单的验证码

如果说要做验证码,那不得不提的就是GDI+绘图了.我们都知道验证码是以图片形式展示的,而且是动态生成的,这样就需要我们去画出它. 科普一下,什么是GDI+? GDI+是图形设备接口(GDI)的高级版本, 提供了各种丰富的图形图像处理功能.GDI+主要由二维矢量图形.图像处理和版式3部分组成.GDI+为使用各种字体.字号和样式来显示文本这种复杂任务提供了大量的支持. 下面说说验证码,对于验证码这样的图片,我觉得是由两部分组成的,一部分是矩形的背景,另一部分是在其上的字母数字组合(有的时候有汉字,有

单一功能学习----简单的验证码

一.验证码的作用 1.防止大量重复请求.一般在登录的时候需要验证码,验证码的作用就是拖延时间,让每次登录的操作时间间隔变长,这样可以防止有人暴力破解密码登录. 二.设计思路 1.最简单的验证码,就是一串数字了.小时候看到的就是这个样子的,4个数字. 2.这串数字应该是随机的. 3.这串数字是可以更换的(以前看到的换一张按钮). 4.要有一个输入框,输入验证码. 5.每登录一次,若失败应该更换验证码. 6.稍微高级一点,验证码可以变成一张图片,防止恶意软件直接从前端代码获取验证码值. 7.更高级的

python 简单图像识别--验证码

python  简单图像识别--验证码 记录下,准备工作安装过程很是麻烦. 首先库:pytesseract,image,tesseract,PIL windows安装PIL,直接exe进行安装更方便(https://files.cnblogs.com/files/Oran9e/PILwin64.zip)(https://files.cnblogs.com/files/Oran9e/PILwin32.zip) 安装 image:pip install image 安装 pytesseract:pi