Javascript: 前端JS生成验证码

JS生成验证码

html代码：

<canvas id="canvas" width="150" height="33" style="cursor:
pointer;"></canvas>

js代码：

<script>function randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);}/**生成一个随机色**/function randomColor(min, max) {var r = randomNum(min, max);var g = randomNum(min, max);var b = randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";}/**绘制验证码图片**/function drawPic() {var canvas = document.getElementById("canvas");var width = 150;var height = 33;//获取该canvas的2D绘图环境 var code = "";if (canvas != null) {var ctx = canvas.getContext('2d');ctx.textBaseline = 'bottom';/**绘制背景色**/ctx.fillStyle = randomColor(180, 240);//颜色若太深可能导致看不清ctx.fillRect(0, 0, width, height);/**绘制文字**/var str = 'ABCDEFGHIJKLMNPQRSTUVWXYZ123456789';//生成四个验证码for (var i = 1; i <= 4; i++) {var txt = str[randomNum(0, str.length)];code = code + txt;ctx.fillStyle = randomColor(50, 160);//随机生成字体颜色ctx.font = randomNum(35, 40) + 'px SimHei';//随机生成字体大小var x = 10 + i * 25;var y = randomNum(33, 35);var deg = randomNum(-30, 30);//修改坐标原点和旋转角度ctx.translate(x, y);ctx.rotate(deg * Math.PI / 180);ctx.fillText(txt, 0, 0);//恢复坐标原点和旋转角度ctx.rotate(-deg * Math.PI / 180);ctx.translate(-x, -y);}/**绘制干扰线**/for (var i = 0; i < 3; i++) {ctx.strokeStyle = randomColor(40, 180);ctx.beginPath();ctx.moveTo(randomNum(0, width / 2), randomNum(0, height / 2));ctx.lineTo(randomNum(0, width / 2), randomNum(0, height));ctx.stroke();}/**绘制干扰点**/for (var i = 0; i < 50; i++) {ctx.fillStyle = randomColor(255);ctx.beginPath();ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);ctx.fill();}}console.log(code);return code;}//初始化验证码verCode = drawPic();var reflashCode = document.getElementById("canvas");if (reflashCode != null) {reflashCode.onclick = function (e) {e.preventDefault();verCode = drawPic();}}   </script>

Javascript: 前端JS生成验证码相关推荐

前端js生成打包文件下载
js生成压缩文件打包下载因为项目中要批量下载文件,但是谷歌浏览器一次只能下载10条,不能满足需求,所以改为打包下载. ##这里是需要引入的js文件 /*! JSZip v3.6.0 - A Java ...
前端随机生成验证码vuejsvant~element
h5移动端 1.具体实现效果 2.创建SIdentify组件,主要用于验证码样式 <template><div class="s-canvas"><c ...
js生成验证码并验证 .
<html> <head> <title>验证码</title> <style type="text/css"> .co ...
js生成验证码并且验证
<html> <head> <title>验证码</title> <style type="text/css"> #co ...
前端-js生成pdf文件
一.引入js插件 html2canvas.js jspdf.debug.js 二.导出范围外层元素添加id <div id="pdfDom"></div> ...
jquery 打开服务器文件管理,javascript - 前端js如何封装一个方法或者是jQuery的插件实现点击一个按钮打开本地文件管理系统，进行上传文件...
世界只因有你2017-05-16 13:38:563楼前段时间封装的一个方法,使用ajax和formData方法,实现文件上传,在上传的过程中显示上传进度 js $('#upload').on('c ...
JavaScript # 前端 js、html中的单引号、双引号及其转义使用
修改之前的代码: menu = " <dd><a href='javascript:;'kit-target data-options='{url:'test.aspx', ...
前端js html转换成pdf可下载打印；前端js可批量生成条形码；前端js可批量生成二维码，生成letter标签
注意:本文调试的是letter纸尺寸前端js html转换成pdf可下载打印 html2canvas + jspdf 前端js生成条形码 Options · lindell/JsBarcode ...
js生成[n,m]的随机数
一.预备知识 Math.ceil(); //向上取整. Math.floor(); //向下取整. Math.round(); //四舍五入. Math.random(); //0.0 ~ 1 ...
前端js——验证码登录（canvas画布），随机生成验证码，判断正确性
1.html canvas画布: 元素用于图形的绘制,canvas 元素本身是没有绘图能力的,通过脚本 (通常是JavaScript)来完成. 标签通常需要指定一个id属性 (脚本中经常引用), wi ...

Javascript: 前端JS生成验证码

Javascript: 前端JS生成验证码相关推荐

最新文章

热门文章