刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下:

主要代码如下:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    <div class="wrapper">

        <div class="inputBox">

            <input type="text" class = 'inputCaptcha' placeholder = "请输入验证码">

            <span class="captchaIcon"></span>

        </div>

        <p class="errorText"></p>

        <div class="canvasBox">

            <div class="imageBox">

                <canvas width =300 height=80 id = 'canvasCaptcha'></canvas>

                <input type="button" class='refresh'>

            </div>

        </div>

        <button class="captchaSubmit">submit</button>

    </div>

    <script src='./jquery.js'></script>

    <script src = './index.js'></script>

</body>

</html>

 css

* {

    margin:;

    padding:;

}

.wrapper {

    width: 345px;

    border: 1px solid #ccc;

    border-radius: 10px;

    padding: 20px 10px;

    margin: 30px 30px;

}

.inputBox {

    width: 345px;

    margin: 0 auto 10px;

    position: relative;

}

.inputBox .inputCaptcha {

    display: inline-block;

    height: 50px;

    width: 86%;

    text-indent: 1em;

    border: 1px solid #ddd;

    border-radius: 5px;

}

.inputBox .captchaIcon {

    display: none;

    position: absolute;

    top: 50%;

    right: 0px;

    margin-top: -16px;

    width: 32px;

    height: 32px;

    background-size: 100% 100%;

}

.errorText {

    width: 345px;

    margin: 0 auto;

    font-size: 12px;

    color: red;

    display: none;

}

.canvasBox {

    width: 345px;

    margin: 10px auto;

    position: relative;

}

#canvasCaptcha {

    border-radius: 10px;

}

.canvasBox .refresh {

    width: 34px;

    height: 34px;

    position: absolute;

    right: 0px;

    top: 50%;

    margin-top: -17px;

    border:;

    border-radius: 6px;

    background-image: url('./images/update.png');

    background-size: cover;

}

.captchaSubmit {

    padding: 10px 20px;

    background-color: #62b900;

    border:;

    font-size: 20px;

    border-radius: 5px;

    color: #fff;

}

js

var arr = [0,1,2,3,4,5,6,7,8,9];

for(var i = 65;i < 122;i++){

    if(i>90&&i<97){

        continue;

    }

    arr.push(String.fromCharCode(i));

}
//每个验证码可能出现的字母或数字(区分大小写)

var len = arr.length;
//验证码的长度

var canvasStr,value;
//验证码值

function createCanvas(){

    canvasStr = '';

    value = '';

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

        var a = arr[Math.floor(Math.random()*len)];

        canvasStr += a+' ';

        value += a;

    }
//canvas

    var oCanvas = document.getElementById('canvasCaptcha');

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

    var w = oCanvas.width;

    var h = oCanvas.height;

    var oImg = new Image();

    oImg.src = './images/bg.jpg';

    oImg.onload = function(){

        var pattern = ctx.createPattern(oImg,'repeat');

        ctx.fillStyle = pattern;

        ctx.fillRect(0,0,w,h);

        ctx.fillStyle = '#ccc';

        ctx.textAlign = 'center';

        ctx.font = '46px Roboto Slab';

        ctx.setTransform(1,-0.12,0.2,1,0,12);

        ctx.fillText(canvasStr,w/2,60);

    }

}

createCanvas();


//验证输入的验证码与图中验证码时候相等

function captcha(e){

    if(e == value){

        return true;

    }

    else{

        return false;

    }

}

//点击提交按钮时的结果

function showResult(){

    var inputValue = $('.inputCaptcha').val();

    if(inputValue == '' ||inputValue == null || inputValue == 'undefined'){

        $('.errorText').css({display:'inline-block'}).html('验证码不能为空,请重新输入!');

        $('.captchaIcon').css({display:'inline-block',backgroundImage:"url('./images/false.png')"});

    }else{

        var flag = captcha(inputValue);

        if(!flag){

            $('.errorText').css({display:'inline-block'}).html('验证码错误,请重新输入!');

            $('.captchaIcon').css({display:'inline-block',backgroundImage:"url('./images/false.png')"});

        }else{

            $('.captchaIcon').css({display:'inline-block',backgroundImage:"url('./images/true.png')"});

        }

    }

}

$('.captchaSubmit').click(showResult);//提交

$('.refresh').click(createCanvas);//刷新
//点击input框

$('.inputCaptcha').focus(function(){

    $('.errorText').add($('.captchaIcon')).fadeOut(100);

})

利用canvas写一个验证码小功能的更多相关文章

  1. 【MFC】利用MFC写一个计时器小程序

    1整体设计 创建对话框程序,并且设计对话框相关控件如图 相应的ID和对应的成员变量如图: 我的想法是这样的,只读属性的编辑框添加有CString类型的成员变量(如s_hour),在xxxDlg.h里另 ...

  2. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  3. 学了C语言，如何利用CURL写一个下载程序？—用nmake编译CURL并安装

    在这一系列的前一篇文章学了C语言,如何为下载狂人写一个磁盘剩余容量监控程序?中,我们为下载狂人写了一个程序来监视磁盘的剩余容量,防止下载的东西撑爆了硬盘.可是,这两天,他又抱怨他的下载程序不好用,让我 ...

  4. 学了C语言，如何利用cURL写一个程序验证某个网址的有效性？

    在<C程序设计伴侣>以及这几篇关于cURL的文章中,我们介绍了如何利用cURL写一个下载程序,从网络下载文件.可是当我们在用这个程序下载文件时,又遇到了新问题:如果这个网址是无效的,那么我 ...

  5. 利用 Python 写一个颜值测试小工具

    我们知道现在有一些利用照片来测试颜值的网站或软件,其实使用 Python 就可以实现这一功能,本文我们使用 Python 来写一个颜值测试小工具. 很多人学习python,不知道从何学起.很多人学习p ...

  6. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

  7. Spring Security 实战干货：从零手写一个验证码登录

    1. 前言 前面关于Spring Security写了两篇文章,一篇是介绍UsernamePasswordAuthenticationFilter,另一篇是介绍 AuthenticationManag ...

  8. 手把手教你写一个RN小程序!

    时间过得真快,眨眼已经快3年了! 1.我的第一个App 还记得我14年初写的第一个iOS小程序,当时是给别人写的一个单机的相册,也是我开发的第一个完整的app,虽然功能挺少,但是耐不住心中的激动啊,现 ...

  9. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

随机推荐

  1. OC静态代码检查实战

    此文已由作者杨晓授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在Mac OS系统上,采用Xcodebuild Analyze命令和OClint工具,对iOS项目进行静态代码 ...

  2. Codeforces Round #331 (Div. 2)【未完待续】

    http://codeforces.com/problemset/problem/596/B GGGGGGGGGGGGGGGGGGG

  3. C#解决窗体全屏遮住任务栏

    this.MaximizedBounds = Screen.PrimaryScreen.WorkingArea; 在初始话后添加这个即可实现,...............

  4. Win10各个版本免费激活密钥

      专业版:W269N-WFGWX-YVC9B-4J6C9-T83GX 企业版:NPPR9-FWDCX-D2C8J-H872K-2YT43 家庭版:TX9XD-98N7V-6WMQ6-BX7FG-H8 ...

  5. python之文件的读写

    读  r   读写模式   r+     如果打开文件时没有指定模式,默认只读,如果使用r或r+,文件不存在时会报错 写  w  写读模式  w+    w模式会清空原有的文件内容 追加 a  追加读 ...

  6. 2015 ACM-ICPC国际大学生程序设计竞赛北京赛区网络赛 1002 Mission Impossible 6

    题目链接: #1228 : Mission Impossible 6 解题思路: 认真读题,细心模拟,注意细节,就没有什么咯!写这个题解就是想记录一下rope的用法,以后忘记方便复习. rope(块状 ...

  7. 学习JavaScript数据结构与算法 (二)

    学习JavaScript数据结构与算法 的笔记 包含第四章队列, 第五章链表 本人所有文章首发在博客园: http://www.cnblogs.com/zhangrunhao/ 04队列 实现基本队列 ...

  8. Android 暗码表

    转自: http://blog.csdn.net/jiangshide/article/details/8192834 不同手机厂商可能会隐藏或修改暗码,部份暗码要谨慎使用,因为可能令手机失去原有的功 ...

  9. hibernate Day2

    Day21 实体类编写规则(1 ) 实体类中的属性是私有属性(2) 私有属性要生成get与set方法(3) 实体类中有属性作为唯一值(一般使用id值)(4) 实体类属性建议不要使用基本数据类型, 应当 ...

  10. [已读]跨终端web

    13年去听阿里技术嘉年华,鬼道分享了<移动优先前端产品的探索>.今年我买这本书,事实上是被高大上的目录吸引→ → 买来后发现,嘿,似曾相识啊,但还是老老实实得花一下午把书翻了一遍.翻完之后 ...