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的浏览器中打开即可
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a1455990364/article/details/78701031

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

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

canvas高级验证码

直接上代码,canvas与原生实现的高级验证码,无法复制选中拖拽以及获取标签内元素来获取验证码的值. function showCheck(){ var c = document.getElem...
  • momDIY
  • momDIY
  • 2017-01-17 23:21:11
  • 1039

javascript利用canvas制作验证码

html部分,创建一个div容器&amp;lt;div style=&quot;width: 300px;height: 50px&quot; id=&quot;login_validate&quot...
  • binquan_liang
  • binquan_liang
  • 2018-03-13 20:10:15
  • 31

canvas绘制图形验证码

body> canvas id="canvas" width="120" height="40">canvas> a href="#" id="changeImg">看...
  • feng1737000
  • feng1737000
  • 2018-01-07 12:03:26
  • 86

H5canvas实现随机验证码

  • 2017年06月20日 22:25
  • 3KB
  • 下载

JS如何制作图形验证码

实际效果第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一)弹框的样式如图二所示: (图二)我们要对验证码的值进行校验,判断验...
  • qq_24147051
  • qq_24147051
  • 2016-09-13 10:17:25
  • 7261

CSS3 Canvas实现一个带干扰线条的随机数验证码

工作中接到的任务是做一个带干扰项的验证码,首先想到的是利用H5的canvas来实现。 本想直接网上copy一段代码,但很多都不符合需求,索性自己写了,代码如下。 Your browser d...
  • qwezxc24680
  • qwezxc24680
  • 2017-05-24 10:17:01
  • 848

Html5生成验证码

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

基于canvas生成验证码

基于html中canvas标签的验证码图片生成方法小前端一只,在自己网站中写了一个留言功能,需要随机生成验证码,发现网上大多是用后台技术生成,无奈本人看不明白,无奈之下(其实从安全角度来看图片验证码还...
  • cloveryuan
  • cloveryuan
  • 2018-03-21 10:24:12
  • 22

工具类 获取图像验证码

获取图像验证码import java.util.Random;import android.graphics.Bitmap; import android.graphics.Bitmap.Config...
  • hyl411136528
  • hyl411136528
  • 2016-12-10 10:57:37
  • 511
收藏助手
不良信息举报
您举报文章:HTML5 canvas 画网页验证码(验证码一般不可能是一张图片)
举报原因:
原因补充:

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