HTML5 uses canvas to achieve verification code effect (code example)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 uses canvas to achieve verification code effect (code example)

青灯夜游

Sep 20, 2018 am 09:18 AM

canvashtml5Verification code

Usually we can see the verification code on the login interface. The function of the verification code is to detect whether a human is operating, prevent non-human operations such as machines, and prevent the database from being easily broken. Generally, verification codes are written in back-end languages such as PHP and Java; in fact, verification codes can also be implemented using front-end technology: use canvas or SVG to draw the verification code. This chapter introduces how to use canvas to draw verification codes (code examples) in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

canvas verification code display effect:

Click to change (redraw) verification code:

HTML5 uses canvas to achieve verification code effect (code example)

Run the function output on the console and return Value (verification code):

HTML5 uses canvas to achieve verification code effect (code example)

Code:

<!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>

The above is the detailed content of HTML5 uses canvas to achieve verification code effect (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Vue和Canvas：如何实现手写签名和手势识别功能Jul 18, 2023 am 08:49 AM

Vue和Canvas：如何实现手写签名和手势识别功能引言：手写签名和手势识别功能在现代应用程序中越来越常见，它们可以为用户提供更加直观和自然的交互方式。Vue.js作为一款流行的前端框架，搭配Canvas元素可以实现这两个功能。本文将介绍如何使用Vue.js和Canvas元素来实现手写签名和手势识别功能，并给出相应的代码示例。一、手写签名功能实现要实现手写签

Canvas的优势有哪些Aug 17, 2023 pm 04:52 PM

canvas的优势有强大的绘图功能、高性能、跨平台兼容性、支持多种图形格式、可以与其他Web技术集成、可以实现动态效果和可以实现复杂的图像处理。详细介绍：1、Canvas提供了丰富的绘图功能，可以绘制各种形状、线条、文本、图像等；2、Canvas在浏览器中直接操作像素，因此具有很高的性能；3、Canvas是基于HTML5标准的一部分，可以在各种现代浏览器上运行等等。

canvas特效有哪些Aug 18, 2023 pm 04:12 PM

canvas特效有粒子效果、线条动画、图片处理、文字动画、音频可视化、3D效果、游戏开发等。详细介绍：1、粒子效果，通过控制粒子的位置、速度和颜色等属性来实现各种效果，如烟花、雨滴、星空等；2、线条动画，通过在画布上绘制连续的线条，创建出各种动态的线条效果；3、图片处理，通过对图片进行处理，可以实现各种炫酷的效果，如图片切换、图片特效等；4、文字动画等等特性。

如何利用Vue和Canvas创建逼真的天气动态背景Jul 17, 2023 am 08:33 AM

如何利用Vue和Canvas创建逼真的天气动态背景引言：在现代网页设计中，动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Vue和Canvas技术来创建一个逼真的天气动态背景效果。通过代码示例，你将学习如何编写Vue组件和利用Canvas绘制不同天气场景，从而实现一个独特而吸引人的背景效果。步骤一：创建Vue项目首先，我们需要创建一个Vue项目。

canvas插件有哪些Aug 17, 2023 pm 05:00 PM

canvas插件有Fabric.js、EaselJS、Konva.js、Three.js、Paper.js、Chart.js和Phaser。详细介绍：1、Fabric.js 是一个基于Canvas的开源 JavaScript 库，它提供了一些强大的功能；2、EaselJS是CreateJS库中的一个模块，它提供了一套简化了Canvas编程的API；3、Konva.js等等。

Vue和Canvas：如何实现图片的马赛克效果Jul 16, 2023 pm 10:17 PM

Vue和Canvas：如何实现图片的马赛克效果引言：随着Web技术的不断发展，越来越多的人开始使用Vue框架来构建交互式的前端应用。而在前端开发中，常常需要为用户提供图片处理的功能。本文将介绍如何利用Vue和Canvas实现图片的马赛克效果，为用户带来更好的视觉体验。一、马赛克效果概述马赛克效果是一种将图像的细节部分进行像素化处理，使得整个图像变得模糊和抽象

Vue和Canvas：如何实现视频播放器的定制化界面Jul 18, 2023 pm 02:49 PM

Vue和Canvas：如何实现视频播放器的定制化界面引言：在现代互联网时代，视频已经成为人们生活中必不可少的一部分。为了提供良好的用户体验，许多网站和应用程序都提供了自定义的视频播放器界面。本文将介绍如何使用Vue和Canvas技术实现一个定制化的视频播放器界面。一、前期准备在开始之前，您需要确保您已经安装了Vue和Canvas，并且熟悉这两种技术的基本用法

canvas引擎有哪些Aug 17, 2023 pm 05:29 PM

canvas引擎有Three.js、Pixi.js、EaselJS、Konva.js、Paper.js等。详细介绍：1、Pixi.js，提供了简单易用的API，支持精灵、纹理、滤镜等功能，同时还提供了丰富的工具和插件，方便开发者进行交互、动画和优化等操作；2、Pixi.js，提供了简单易用的API，支持精灵、纹理、滤镜等功能，还提供了丰富的工具和插件；3、EaselJS等等。

See all articles