天天看点
返回

用ajax写验证码随机数,JavaScript随机验证码

利用canvas制作一个随机验证码：

1、clearRect：context.clearRect(x,y,width,height);清空给定矩形内的指定像素

2、fillStyle：设置画笔的颜色

3、rotate(deg)：旋转角度，以弧度旋转(弧度=degrees*Math.PI/180 )

4、translate()： 方法重新映射画布上的位置

5、Math.random()：获取0-1之间的一个随机数，不包含1

用ajax写验证码随机数,JavaScript随机验证码

canvas随机验证码

var myCanvas = document.querySelector("#canvas");

var blur = myCanvas.getContext("2d");

// 当点击画布时创建一个新的路径

// 验证码封装

myCanvas.onclick = function() {

// 实现点击画布创建一个新的验证码

blur.clearRect(0,0,100,40);

verify();

}

verify();

function verify() {

// 绘制矩形框

// blur.strokeRect(0,0,100,40);

// 随机验证码

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "s", "t", "u",

"v", "w", "x", "y", "z", "A", "B", "C", "D", "F", "G", "H", "I", "J", "K", "L", "S", "T", "U", "V", "W", "X", "Y",

"Z"

];

// 显示四位数的验证码

for (var i = 0; i < 4; i++) {

var x = 20 + 20 * i;

var y = 20 + 10 * Math.random();

// console.log(x,y);

// 在数组中获取到随机的索引整数

var index = Math.floor(Math.random() * arr.length);

// 通过随机的索引获取到随机的元素

var texts = arr[index];

// 设置验证码的相关样式

blur.font = "bold 20px 微软雅黑";

blur.fillStyle = textColor();

// 画布旋转显示

// translate() 方法重新映射画布上的位置

blur.translate(x, y);

// 将画布旋转，旋转角度，以弧度旋转(弧度=degrees*Math.PI/180 )

var deg = 90 * Math.random() * Math.PI / 180;

blur.rotate(deg); //

blur.fillText(texts, 0, 0);

// 将画布映射返回原来的位置

blur.rotate(-deg);

blur.translate(-x, -y);

}

// 制作验证码的干扰线制作

for(var i=0;i<6;i++){

blur.beginPath();

blur.moveTo(Math.random()*100,Math.random()*40);

blur.lineTo(Math.random()*100,Math.random()*40);

// 设置干扰线的颜色

blur.strokeStyle=textColor();

blur.stroke();

}

// 制作验证码的干扰圆点

for(var i=0;i<20;i++){

blur.beginPath();

var x=Math.random()*100;

var y=Math.random()*100;

blur.moveTo(x,y);

blur.lineTo(x+1,y+1);

// 设置干扰线的颜色

blur.strokeStyle=textColor();

blur.stroke();

}

}

// 获取随机颜色封装

function textColor(){

var red=Math.floor(Math.random()*256);

var green=Math.floor(Math.random()*256);

var blue=Math.floor(Math.random()*256);

return "rgb("+red+","+green+","+blue+")";

}

x

要清除的矩形左上角的 x 坐标

y

要清除的矩形左上角的 y 坐标

width

要清除的矩形的宽度，以像素计

height

要清除的矩形的高度，以像素计

伪验证码(含随机验证码方法)js&plus;css

HTML----------------------------------------------html>

C&num;生成随机验证码例子

C#生成随机验证码例子: 前端:

...

php实现动态随机验证码机制(CAPTCHA)

php实现动态随机验证码机制 验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and Humans Ap ...

python笔记-20 django进阶 (model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor)

一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

PYTHON 随机验证码生成

# 生成一个六位随机验证码 import random # random 生成随机数 temp = '' for i in range(6): num = random.randrange(0,6) ...

Java生成随机验证码

package com.tg.snail.core.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

js用正则表达式验证用户和密码的安全性，生成随机验证码

制作了一个表单,表单验证用户.密码.随机验证码 html页面

php学习笔记：利用gd库生成图片，并实现随机验证码

说明:一些基本的代码我都进行了注释,这里实现的验证码位数.需要用的字符串都可以再设置.有我的注释,大家应该很容易能看得懂. 基本思路: 1.用mt_rand()随机生成数字确定需要获取的字符串,对字符 ...

python&lowbar;way&comma;day4 内置函数(callable，chr，随机验证码，ord)，装饰器

python_way,day4 1.内置函数 - 下 制作一个随机验证码 2.装饰器 1.内置函数 - 下 callable() #对象能否被调用 chr() #10进制数字对应的ascii码表中的内 ...

随机推荐

实现LRU的两种方法---python实现

这也是豆瓣2016年的一道笔试题... 参考:http://www.3lian.com/edu/2015/06-25/224322.html LRU(least recently used)就不做过多 ...

【20140113】package 与 import

一个完整的java源程序应该包括下列部分: package语句: //该部分至多只有一句,必须放在源程序的第一句 import语句: public classDefinition: //公共类定义部分 ...

《转》15种CSS混合模式让图片产生令人惊艳的效果

浏览器支持 按照现在情况来讲, 浏览器支持 CSSbackground-blend-mode属性还在不断的完善中.早期版本的浏览器目前还不支持,但caniuse.com报告说在Chrome,Firef ...

123&period; 单词搜索&lpar;DFS&rpar;

描述 给出一个二维的字母板和一个单词,寻找字母板网格中是否存在这个单词. 单词可以由按顺序的相邻单元的字母组成,其中相邻单元指的是水平或者垂直方向相邻.每个单元中的字母最多只能使用一次. 样例 给出 ...

npm介绍和使用

# npm 介绍 > 概念 : node 包管理工具 > 作用 : 通过 npm 来快速下载/安装项目中依赖的包 > 查看 版本号 : npm -v     # npm 基本使用演示 ...

谁为你的app捡肥皂

2048奇迹,是大多数个人开发者的梦寐以求的期望.而做出flappy bird这样跨时代的游戏,则能够让我们赚的盆满钵满.那么我们怎么样使我们app与众不同,脱颖而出了. 我们这些凡夫俗子程序员们,对 ...

select case when if 的一些用法

概述:sql语句中的case语句与高级语言中的switch语句,是标准sql的语法,适用于一个条件判断有多种值的情况下分别执行不同的操作. 首先,让我们看一下CASE的语法.在一般的SELECT中,其 ...

unity3d插件Daikon Forge GUI 中文教程-3-基础控件Button和Sprite的使用

(游戏蛮牛首发)大家好我是孙广东.官网提供了专业的视频教程http://www.daikonforge.com/dfgui/tutorials/,只是是在youtube上.要观看是须要FQ的. 只是教 ...

修改zend studio字体大小

第一步:进入设置窗口    windows -> preferences第二步:进入修改字体的选项卡.    General -> Appearance -> Colors and ...

用ajax写验证码随机数
上一篇: JS实现随机数验证码
下一篇: 验证码之随机数