H5+JS生成验证码

效果图如下：

<canvas id="canvas1"  style="margin-left: 200px;"></canvas><br />

<button id="btnRefresh" style="position: relative;left: 200px;">看不清，刷新一下</button>

<script>

    /*定义函数生成随机颜色*/

    function colorRandom(){

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

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

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

        return "rgb("+ r + ","+ g +","+ b+")";

    }

    /*生成随机数*/

    var canvas,context;

    function getYZ(){

        canvas = document.getElementById("canvas1");

        context = canvas.getContext('2d');

        canvas.width = 200;

        canvas.height = 100;

        context.beginPath();

        context.fillStyle = colorRandom();//显示验证码区域的背景色

        context.rect(0,55,100,40);

        context.fill();

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

            context.font =( Math.random()*20+16)+"px 微软雅黑";//数字随机大小

            context.fillStyle = colorRandom();//数字颜色

            context.fillText(parseInt(Math.random()*9), 20*i,90);   //0-9的随机数

        }

    }

    /*实现*/

    window.onload = function(){

        getYZ();

        document.getElementById("btnRefresh").onclick = function(){

            getYZ();

        }

    }

</script>

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>图形验证码</title>

</head>

<body>

<div id="v_container" style="width: 200px;height: 50px;"></div>

<input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>

</body>

<script>

    !(function(window, document) {

        function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数

            this.options = { //默认options参数值

                id: "", //容器Id

                canvasId: "verifyCanvas", //canvas的ID

                width: "100", //默认canvas宽度

                height: "30", //默认canvas高度

                type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母

                code: ""

            }

            if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型

                for(var i in options) { //根据传入的参数，修改默认参数值

                    this.options[i] = options[i];

                }

            }else{

                this.options.id = options;

            }

            this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");

            this.options.letterArr = getAllLetter();

            this._init();

            this.refresh();

        }

        GVerify.prototype = {

            /**版本号**/

            version: '1.0.0',

            /**初始化方法**/

            _init: function() {

                var con = document.getElementById(this.options.id);

                var canvas = document.createElement("canvas");

                this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";

                this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";

                canvas.id = this.options.canvasId;

                canvas.width = this.options.width;

                canvas.height = this.options.height;

                canvas.style.cursor = "pointer";

                canvas.innerHTML = "您的浏览器版本不支持canvas";

                con.appendChild(canvas);

                var parent = this;

                canvas.onclick = function(){

                    parent.refresh();

                }

            },

            /**生成验证码**/

            refresh: function() {

                this.options.code = "";

                var canvas = document.getElementById(this.options.canvasId);

                if(canvas.getContext) {

                    var ctx = canvas.getContext('2d');

                }else{

                    return;

                }

                ctx.textBaseline = "middle";

                ctx.fillStyle = randomColor(180, 240);

                ctx.fillRect(0, 0, this.options.width, this.options.height);

                if(this.options.type == "blend") { //判断验证码类型

                    var txtArr = this.options.numArr.concat(this.options.letterArr);

                } else if(this.options.type == "number") {

                    var txtArr = this.options.numArr;

                } else {

                    var txtArr = this.options.letterArr;

                }

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

                    var txt = txtArr[randomNum(0, txtArr.length)];

                    this.options.code += txt;

                    ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小

                    ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色

                    ctx.shadowOffsetX = randomNum(-3, 3);

                    ctx.shadowOffsetY = randomNum(-3, 3);

                    ctx.shadowBlur = randomNum(-3, 3);

                    ctx.shadowColor = "rgba(0, 0, 0, 0.3)";

                    var x = this.options.width / 5 * i;

                    var y = this.options.height / 2;

                    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 < 4; i++) {

                    ctx.strokeStyle = randomColor(40, 180);

                    ctx.beginPath();

                    ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));

                    ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));

                    ctx.stroke();

                }

                /**绘制干扰点**/

                for(var i = 0; i < this.options.width/4; i++) {

                    ctx.fillStyle = randomColor(0, 255);

                    ctx.beginPath();

                    ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);

                    ctx.fill();

                }

            },

            /**验证验证码**/

            validate: function(code){

                var code = code.toLowerCase();

                var v_code = this.options.code.toLowerCase();

                console.log(v_code);

                if(code == v_code){

                    return true;

                }else{

                    this.refresh();

                    return false;

                }

            }

        }

        /**生成字母数组**/

        function getAllLetter() {

            var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";

            return letterStr.split(",");

        }

        /**生成一个随机数**/

        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 + ")";

        }

        window.GVerify = GVerify;

    })(window, document);

</script>

<script>

    var verifyCode = new GVerify("v_container");

    document.getElementById("my_button").onclick = function(){

        var res = verifyCode.validate(document.getElementById("code_input").value);

        if(res){

            alert("验证正确");

        }else{

            alert("验证码错误");

        }

    }

</script>

</html>

H5+JS生成验证码的更多相关文章

node.js生成验证码及图片
示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...
纯js生成验证码
实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...
js生成验证码并检验
<html> <head> <title>验证码</title> <style type="text/css"> #co ...
js生成验证码并验证
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...
js生成验证码并且判断
<style type="text/css"> .code { font-family: Arial; ...
js生成验证码并且验证
<html> <head> <title>验证码</title> <style type="text/css"> #co ...
js生成验证码并验证的登录页面
<!Doctype html> <html> <head> <meta charset="utf-8"/> <title> ...
js生成验证码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js生成[n,m]的随机数
一.预备知识 Math.ceil(); //向上取整. Math.floor(); //向下取整. Math.round(); //四舍五入. Math.random(); //0.0 ~ 1 ...

随机推荐

mac-禅道环境
开机不能访问,换成IP地址就好了
js多个异步请求，按顺序执行next
在js里面,偶尔会遇见需要多个异步按照顺序执行请求,又不想多层嵌套,,这里和promise.all的区别在于,promise或者Jquery里面的$.when 是同时发送多个请求,一起返回,发出去的顺 ...
Appium基础(四)查找app的appActivity与appPackage
要查看appActivity需要借助日志:adb logcat>D:/log.log 前提是已经装了Android SDK 在目录D:\Program Files (x86)\android\ ...
Oracle 11g快速收集全库统计信息
环境:Oracle 11.2.0.4 采用并行的方式,快速收集全库统计信息,多用于跨版本升级之后,对全库的统计信息重新进行快速收集: --开启计时 set timing on --设置并行收集 exe ...
layui透明弹框
效果: layui.use('layer', function () { var layer = layui.layer; var str = '<div>'; str += '<d ...
1.23 codeforces div3 C.Nice Garland
You have a garland consisting of nn lamps. Each lamp is colored red, green or blue. The color of the ...
HDU 6298
Problem Description Given an integer n, Chiaki would like to find three positive integers x, y and z ...
linux文件目录管理命令
1．touch命令 touch命令用于创建空白文件或设置文件的时间,格式为“touch [选项] [文件]”. touch test命令可以创建出一个名为test的空白文本文件 touch命令的参数 ...
添加Google搜索
给自己的网站加一个搜索功能很简单,代码如下: 欢迎访问我的博客:http://67566894.iteye.com/ <form action="http://www.google.c ...
os.system
python os.system os.system()函数在不同的系统下可以实现不同的作用一.window下: os.system("ping www.baidu.com" ...

H5+JS生成验证码

H5+JS生成验证码的更多相关文章

随机推荐

热门专题