利用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

  

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas随机验证码</title>
</head>
<body>
<canvas id="canvas" width="100" height="40" style="border: 1px solid red;display: block;margin: 0 auto;"></canvas>
</body>
<script type="text/javascript">
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+")";
}
</script>
</html>
x 要清除的矩形左上角的 x 坐标
y 要清除的矩形左上角的 y 坐标
width 要清除的矩形的宽度,以像素计
height 要清除的矩形的高度,以像素计

JavaScript随机验证码的更多相关文章

  1. 伪验证码(含随机验证码方法)js+css

    HTML----------------------------------------------<!DOCTYPE html><html><head><m ...

  2. C#生成随机验证码例子

    C#生成随机验证码例子: 前端: <tr> <td width=" align="center" valign="top"> ...

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

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

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

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

  5. PYTHON 随机验证码生成

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

  6. Java生成随机验证码

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

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

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

  8. php学习笔记:利用gd库生成图片,并实现随机验证码

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

  9. python_way,day4 内置函数(callable,chr,随机验证码,ord),装饰器

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

随机推荐

  1. VBA添加下拉菜单

    Sub createMenus() Dim cmdBar As CommandBar Dim cmdMenu As CommandBarPopup Dim cmdBtn As CommandBarBu ...

  2. 浏览器与NodeJS环境 eventloop异同详解(转)

    结论:浏览器中是一个宏任务,所有微任务,一个宏任务,所有微任务...           NodeJS中,一种宏任务队列所有任务,所有微任务,一种宏任务队列所有任务,所有微任务... ┌─────── ...

  3. <c:if test="${uns ne ‘admin’}">

    类别 运算符 算术运算符 + . - . * . / (或 div )和 % (或 mod ) 关系运算符 == (或 eq ). != (或 ne ). < (或 lt ). > (或 ...

  4. sed例子

    以care.log这个log文件为例, care.log: 05:44:31,816 DEBUG RawAggregationWorker:70 - LTS is working on Raw Dat ...

  5. GCN入门理解

    图是信息的最佳表示方式.在一个图中,有通过边(谓之“关系”)连接起来的节点(谓之“实体”).想一想,你的Facebook社交网络是个什么样子的:以你为中心连接上你的朋友们,他们又以不同的方式相互联系. ...

  6. 如何使用postman模拟https的post和get请求

    下载postman The Collaboration Platform for API Development https://www.getpostman.com/ 按照api文档要求测试,下面以 ...

  7. for 和 while 用于遍历时候的区别

    for: 以空格作为间隔符,输出字段. read: 以行作为间隔符,输出字段. 对于文件来说,如果只有一列,for  和  read 无区别, 多列的话, 有区别. read  用法详情: 见 如下转 ...

  8. 解决升Win10系统后VMware虚拟机不能联网的问题

    刚升级到Win10系统,打开虚拟机发现不能联网,其实是系统服务项里缺少两个用到的服务,不能联网了,下面教大家解决联网问题. 1.打开VMware虚拟机主页,点击“编辑——虚拟网络编辑器”. 2.点击左 ...

  9. 【计算机视觉】深度相机(四)--Realsense概览

    本文参考下文,做一点个人使用补充. http://blog.csdn.net/app_12062011/article/details/52662143 转自: http://blog.csdn. ...

  10. 大周末的不休息,继续学习pandas吧,pandas你该这么学,No.7

    其实,写文章真的挺难的 每天抽点时间,写写文采飘逸的文章 坚持个几年,成为称霸一方的大佬 坚持就会成功吧~ 最近碰到瓶颈了, 一直找不到好的运营公众号的方式(好想有人指导唉~,对了,橡皮擦有个100多 ...