HTML5 canvas 画网页验证码(验证码一般不可能是一张图片)

原创 2017年12月03日 13:10:49

如果验证码是一张图片,那么每一个验证码图片都要对应一个字符串的验证码,这样做是很麻烦的,所以一般的验证码都是利用canvas或者别的东西画出来的随机验证码,然后转图片.或者直接不转,那么验证码怎么画的呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid red;
            background-color: gainsboro;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!--利用js属性取消a标签默认点击样式-->
    <a href="javascript:void(0)" onclick="DrawNumber()">画数字验证码</a>
    <a href="javascript:void(0)" onclick="DrawLetter()">画字母验证码</a>
    <img src="demo.jpg" style="display: none">
    <button onclick="document.getElementsByTagName('img')[0].style.display = 'inherit'">按钮</button>
    <!--画布-->
    <canvas id = "my_canvas" width="100" height="40">
        <!--浏览器不兼容提示-->
        你的浏览器不支持canvas,请使用谷歌/欧朋/360/QQ等浏览器最新版
    </canvas>


    <script>

        //画数字验证码
        function DrawNumber() {
            var canvas = document.getElementById("my_canvas");
            var draw = canvas.getContext("2d");
            //利用画布宽高重制属性 清除画布内容
            canvas.height = canvas.height;
            //随机字体样式
            var font = ["宋体","黑体","微软雅黑","草书"];
            //随机字体颜色
            var color = ["red","pink","black","gay","yellow","green","blue"];
            //获得5位随机数字验证码
            var num = (10000 + parseInt(Math.random()* 89999)) + "";
            //一个个字母画出来
            for( var i = 0; i < 5; i++){
                //该数字的字体属性 "是否加粗 大小 字体样式"
                draw.font = 30 + parseInt(Math.random() * 10) + "px "+font[parseInt(Math.random() * 4)];
                //填充样式 (这里取颜色)
                draw.fillStyle = color[parseInt(Math.random() * 7)];
                //把当前选中数字画在画布上(注意:是一个数字一个数字画)
                draw.fillText(num[i]+"",20 * i,30 + parseInt(Math.random() * 10));
            }
            //调用画干扰线
            drawLine(draw);
        }

        //画英文验证码
        function DrawLetter() {
            var canvas = document.getElementById("my_canvas");
            var draw = canvas.getContext("2d");//语境上下文为2d方式 (没有3d)
            canvas.height=canvas.height;
            var font = ["宋体", "黑体", "微软雅黑", "草书"];
            var color = ["red", "pink", "black", "gay", "yellow", "green", "blue"];
            for (var i = 0; i < 5; i++) {
                var num;
                //随机画出来的字母是大写还是小写
                if(parseInt(Math.random() * 10) % 2 == 0)
                    num = (parseInt(Math.random() * 26));
                else
                    num = 32 + parseInt(Math.random() * 26);
                draw.font = 30 + parseInt(Math.random() * 10) + "px " + font[parseInt(Math.random() * 4)];
                draw.fillStyle = color[parseInt(Math.random() * 7)];
                //String.fromCharCode : 根据ASCII码获取对应字母
                draw.fillText(String.fromCharCode(65 + num), 20 * i, 30 + parseInt(Math.random() * 10));
            }
            drawLine(draw);
        }

        //混合双打????

        //干扰线
        function drawLine(draw) {
            //干扰线固定5条
            for (var i = 0; i < 5; i++){
                draw.moveTo(0,parseInt(Math.random() * 42));
                draw.lineTo(70 + parseInt(Math.random() * 30),parseInt(Math.random() * 30));
                draw.stroke();
            }
        }
    </script>
</body>
</html>
这里有两个版本的画验证码的方式,一个是画数字验证码,一个是画26个英文字母大小写随机验证码.
可以直接复制到记事本 然后保存为html文件 在支持html5的浏览器中打开即可
版权声明:本文为博主原创文章,未经博主允许不得转载。

基于html中canvas标签的验证码图片生成方法

基于html中canvas标签的验证码图片生成方法小前端一只,在自己网站中写了一个留言功能,需要随机生成验证码,发现网上大多是用后台技术生成,无奈本人看不明白,无奈之下 看不清,换一张 ...
  • meishuixingdeququ
  • meishuixingdeququ
  • 2016年08月31日 16:41
  • 5027

Html5生成验证码

Html5生成验证码利用Html5的canvas标签生成画布,在画布上利用随机生成的数字画上验证码,背景为随机生成的颜色和杂乱的直线与点点。 进阶:利用表单插件属性绑定验证码数据(json)可以在发送...
  • qq_24528945
  • qq_24528945
  • 2017年07月05日 10:54
  • 535

利用GDI+绘制验证码

.Net中封装了一个GDI+绘图画面在Graphics类中,该类是个密封类,不能被继承。我们可以利用该类中的各种方法来进行绘图,现在来用GDI+绘制验证码.       正如这张图片所示: 我们要...
  • fulei1107655988
  • fulei1107655988
  • 2014年08月15日 21:59
  • 769

前端js+html实现简单验证码

前些日子接触到一个项目,要求实现一个简单的验证码,参考万能的百度结合自己的想法实现了一个简单的前端验证码,当然跟后台的不能比安全性, 页面部分: 验证码 id="Yzm" style="width: ...
  • gjq1993
  • gjq1993
  • 2017年02月14日 09:15
  • 1058

HTML5人气新元素画布简介 & 验证码实例

HTMl5里新元素很多,但画布绝对是大人气,本篇要简介下画布,并亲手用画布绘出验证码。 使用画布需要先获取2D上下文:getContext("2d") 2D上下文最基本的操作就是描边和填充,分...
  • hongse_zxl
  • hongse_zxl
  • 2014年12月31日 16:08
  • 1661

IOS类似图片验证码的实现

1.初始化一个数组来存数字和字母,随机获取这个数组的4个元素组成一个验证码字符串(以4位验证码为例子 如“4kH6”)。 - (void)changeCodeStr{ self.textAr...
  • qq_30513483
  • qq_30513483
  • 2016年12月05日 09:28
  • 3407

JS实现验证码(简单版)

首先在写代码之前我们来说一下验证码的由来:老网民们大概都记得,刚开始上网的时候,是不存在验证码(capcha)这么一种东西的。这造成的结果是,垃圾评论和垃圾邮件可以轻松通过任何一个网站的注册程序,通过...
  • A__loser
  • A__loser
  • 2017年04月25日 14:15
  • 412

Java 动态验证码

在一个系统或项目中,登录时,验证码是不必可少,一来可以为安全登录多了一层保障,二则防止网络的攻击。验证码的生成有多种,有JS实现,也有框架自带,也有用开发语言实现,例如java。以下介绍下java实现...
  • dymkkj
  • dymkkj
  • 2016年10月31日 16:02
  • 196

MFC的CStatic控件验证码例子

SkinValidateCode.h #ifndef SKIN_VALIDATE_CODE_HEAD_FILE #define SKIN_VALIDATE_CODE_HEAD_FILE #prag...
  • qq125096885
  • qq125096885
  • 2015年05月19日 15:53
  • 639

漂亮的自制java验证码

网上有很多开源的验证码插件,例如jcaptcha,kaptcha等等...这些都不错,不过感觉用起来不太舒服,最后还是网上找了个原型的,然后在这个基础上修改下,效果还算不错,凑合用下,验证码要做到难以...
  • shadowsick
  • shadowsick
  • 2013年12月13日 21:34
  • 19346
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 canvas 画网页验证码(验证码一般不可能是一张图片)
举报原因:
原因补充:

(最多只允许输入30个字)