JavaScript生成随机验证码代码实例
2019-09-28 11:45
1671 查看
利用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 随机验证码的生成实例代码
- java随机验证码生成实现实例代码
- Python 随机生成中文验证码的实例代码
- Python 随机生成中文验证码的实例代码
- java随机动态生成汉字验证码图片的实例代码分享
- java随机动态生成汉字验证码图片的实例代码分享
- Java实现随机验证码功能实例代码
- JavaScript 验证码的实例代码(附效果图)
- 使用java代码生成随机验证码
- javascript开发:JavaScript 验证码的实例代码
- C#中随机验证码生成代码
- Javascript随机标签云代码实例
- 使用JavaScript生成罗马字符的实例代码
- 一段简单的javascript生成随机密码代码
- javascript 验证码生成代码 推荐学习
- javascript随机生成字符串或者验证码
- 利用iOS绘制图片生成随机验证码示例代码
- pillow实例 | 生成随机验证码
- ASP.NET生成随机验证码代码和看不清切换验证码的小结
- 生成随机字符串和验证码的类的PHP实例