html5使用canva实现验证码效果（代码实例）-H5教程-PHP中文网

首页

web前端

H5教程

html5使用canva实现验证码效果（代码实例）

青灯夜游

Sep 20, 2018 am 09:18 AM

canvashtml5验证码

通常我们在登录界面上都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。一般情况下验证码都是用PHP和java等后端语言编写；其实，验证码也可以用前端技术实现：用canva或者SVG绘制验证码。本章给大家介绍html5使用canva绘制验证码（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

canvas验证码展示效果：

点击实现改变(重绘)验证码：

在控制台运行函数输出返回值(验证码)：

代码：

<!DOCTYPE html>
<html>

<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>canvas验证码</title>
</head>

<body>
    <canvas width="200" height="60" id="check" style="border:1px solid #000;">您的浏览器不支持canvas标签！</canvas>
    <script>
        var ctx = document.getElementById("check").getContext("2d");
        var ctxW = document.getElementById("check").clientWidth;
        var ctxH = document.getElementById("check").clientHeight;

        /**
         * 产生一个随机数  可设置随机数区间
         * @param  {[Number]} min [随机数区间下限]
         * @param  {[Number]} max [随机数区间上限]
         * @return {[Number]}     [返回一个在此区间的随机数]
         */
        function ranNum(min, max) {

            return Math.random() * (max - min) + min;

        }

        /**
         * 返回一个随机颜色 可设置颜色区间
         * @param  {[Number]} min [颜色下限]
         * @param  {[Number]} max [颜色上限]
         * @return {[String]}     [随机颜色]
         */
        function ranColor(min, max) {

            var r = ranNum(min, max);

            var g = ranNum(min, max);

            var b = ranNum(min, max);

            // return "rgb(" + r + "," + g + "," + b + ")";
            return `rgb(${r},${g},${b})`;

        }

        /**
         * 随机字符串数组
         * @return {[Array]} [随机数组]
         */
        function ranStr() {

            var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";

            return str.split("").sort(function () {
                return Math.random() - 0.5
            });

        }

        /**
         * 绘制文本字符串
         * @param  {[String]} canvasId [canvas的id]
         * @param  {[Number]} canvasW  [canvas的width]
         * @param  {[Number]} canvasH  [canvas的height]
         * @param  {[Number]} num      [绘制验证码的字数]
         * @param  {[Number]} fsMin    [字体大小下限]
         * @param  {[Number]} fsMax    [字体大小上限]
         * @param  {[Number]} frMin    [字体旋转偏移下限]
         * @param  {[Number]} frMax    [字体旋转偏移上限]
         * @param  {[Number]} min      [颜色下限]
         * @param  {[Number]} max      [颜色上限]
         * @return {[String]} [随机字符串]
         */
        function drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {

            var str = "";

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

                var char = ranStr()[Math.floor(0, ranStr().length)];

                var fs = ranNum(fsMin, fsMax);

                canvasId.font = fs + "px Verdana";

                canvasId.fillStyle = ranColor(min, max);

                // 保存绘制的状态
                canvasId.save();

                // context.translate(x,y);
                // x    添加到水平坐标（x）上的值
                // y    添加到垂直坐标（y）上的值
                // 偏移
                canvasId.translate(canvasW / num * i + canvasW / 20, 0);

                // 变换角度
                canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);

                // context.fillText(text,x,y,maxWidth);
                // text    规定在画布上输出的文本。
                // x    开始绘制文本的 x 坐标位置（相对于画布）。
                // y    开始绘制文本的 y 坐标位置（相对于画布）。
                // maxWidth    可选。允许的最大文本宽度，以像素计。
                canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num);

                // 返回之前保存过的路径状态和属性
                ctx.restore();

                str += char;

            }

            // console.log(str);
            return str;

        }

        /**
         * 绘制背景
         * @param  {[String]} canvasId [canvas的id]
         * @param  {[Number]} canvasW  [canvas的width]
         * @param  {[Number]} canvasH  [canvas的height]
         * @param  {[Number]} min      [下限]
         * @param  {[Number]} max      [上限]
         */
        function drawBg(canvasId, canvasW, canvasH, min, max) {

            // 绘制canvas背景
            canvasId.fillStyle = ranColor(min, max);

            // 填充颜色
            canvasId.fillRect(0, 0, canvasW, canvasH);

        }

        /**
         * 绘制干扰 圆点
         * @param  {[String]} canvasId [canvas的id]
         * @param  {[Number]} canvasW  [canvas的width]
         * @param  {[Number]} canvasH  [canvas的height]
         * @param  {[Number]} num      [绘制的数量]
         * @param  {[Number]} r        [圆点半径]
         * @param  {[Number]} min      [下限]
         * @param  {[Number]} max      [上线]
         */
        function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) {

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

                // 开始绘制 （拿起笔）
                canvasId.beginPath();

                // context.arc(x,y,r,sAngle,eAngle,counterclockwise); （绘制）
                // x    圆的中心的 x 坐标。
                // y    圆的中心的 y 坐标。
                // r    圆的半径。
                // sAngle    起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
                // eAngle    结束角，以弧度计。
                // counterclockwise    可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
                canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);

                // 填充颜色
                canvasId.fillStyle = ranColor(min, max);

                // 填充
                canvasId.fill();

                // 闭合绘制 （放开笔）
                canvasId.closePath();

            }

        }

        /**
         * 绘制干扰 线段
         * @param  {[String]} canvasId [canvas的id]
         * @param  {[Number]} canvasW  [canvas的width]
         * @param  {[Number]} canvasH  [canvas的height]
         * @param  {[Number]} num      [绘制的数量]
         * @param  {[Number]} min      [下限]
         * @param  {[Number]} max      [上线]
         */
        function drawLine(canvasId, canvasW, canvasH, num, min, max) {

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

                // 开始绘制 （拿起笔）
                canvasId.beginPath();

                // 绘制开始点
                canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));

                // 绘制结束点
                canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));

                canvasId.strokeStyle = ranColor(min, max);

                canvasId.stroke();

                canvasId.closePath();

            }

        }

        // 绘制验证码
        function drawCanvas() {

            // 清空canvas
            ctx.clearRect(0, 0, 200, 60);

            // 绘制背景
            drawBg(ctx, ctxW, ctxH, 200, 255);

            // 绘制干扰圆点
            drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);

            // 绘制干扰线段
            drawLine(ctx, ctxW, ctxH, 20, 0, 255);

            // 绘制验证码
            var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);

            return str;

        }

        drawCanvas();

        document.getElementById(&#39;check&#39;).onclick = drawCanvas;
    </script>
</body>

</html>

以上是html5使用canva实现验证码效果（代码实例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5：如何增强网络上的用户体验Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1）多媒体支持：H5的和元素简化开发，提升用户体验。2）离线存储：WebStorage和IndexedDB允许离线使用，提升体验。3）性能优化：WebWorkers和元素优化性能，减少带宽消耗。

解构H5代码：标签，元素和属性Apr 18, 2025 am 12:06 AM

HTML5代码由标签、元素和属性组成：1.标签定义内容类型，用尖括号包围，如。2.元素由开始标签、内容和结束标签组成，如内容。3.属性在开始标签中定义键值对，增强功能，如。这些是构建网页结构的基本单位。

了解H5代码：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术，提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等，增强了网页结构和SEO。2.支持多媒体元素和，无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性，简化了验证过程。4.提供了离线和本地存储功能，提升了网页性能和用户体验。

H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

See all articles