JavaScript生成随机验证码代码实例
更新时间：2019年09月28日 11:45:19 作者：Mr小zhou
这篇文章主要介绍了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
<!-- 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语言实现无缝轮播功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
今天小编就为大家分享一篇layer.close()关闭进度条和Iframe窗的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
JavaScript的变量声明提升问题浅析(Hoisting)
大家应该都只奥javascript的变量声明具有hoisting机制，JavaScript引擎在执行的时候，会把所有变量的声明都提升到当前作用域的最前面。网上关于JavaScript的变量声明提升问题的文章有很多，这篇文章将再次谈谈关于这方面的问题，有需要的朋友们可以参考借鉴。2016-11-11
提高代码性能技巧谈—以创建千行表格为例...2006-07-07
根据分辨率不同，调用不同的css文件...2006-07-07
这篇文章主要介绍了EditPlus 正则表达式 实战(3)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
最近遇到几次需要校验URL的,使用这篇文章小编就为大家整理了一下几个JavaScript校验URL的方法,文中的示例代码简洁易懂,感兴趣的小伙伴可以了解一下2023-12-12
这篇文章主要介绍了JavaScript检查数字是否为整数或浮点数的方法,涉及javascript类型判断的相关技巧,需要的朋友可以参考下2015-06-06
本文主要介绍了JS 简单实现拖拽评星，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
JavaScirpt中有很多对象合并的方法,今天就做个笔记,记录一下这些方法,下面这篇文章主要介绍了javaScript合并对象的多种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
最新评论