JavaScript案例：canvas实现普通4位验证码

最新推荐文章于 2019-12-23 19:36:34 发布

袁成新（Chauncey Yuan）

最新推荐文章于 2019-12-23 19:36:34 发布

阅读量182

点赞数

分类专栏： JavaScript案例文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_43666825/article/details/103553913

版权

JavaScript案例专栏收录该内容

14 篇文章 1 订阅

订阅专栏

效果图

在这里插入图片描述

html和样式

    <style>
        * {
            margin: 0px;
            text-align: center;
            user-select: none;
        }
        
        body {
            padding-top: 30px;
        }
        
        canvas {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <canvas width="600" height="200"></canvas>
    <div class="main">点击画布换一个验证码</div>

js部分：

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var canvasW = canvas.width;
var canvasH = canvas.height;

// 页面加载完成时，执行一次
window.addEventListener("load", init);
// 点击画布时，执行一次
canvas.addEventListener("click", init);

// 初始化
function init() {
    // 清除画布
    ctx.clearRect(0, 0, canvasW, canvasH);
    // 绘制验证码
    drawVerificationCode();
    // 绘制背景颜色
    drawCanvasBackgroundColor();
    // 绘制干扰线
    drawInterferingLine(5);
    // 绘制干扰点
    drawInterferingPoint(50);
}

// 绘制验证码
function drawVerificationCode() {
    let verificationCode = getCode();
    for (let i = 0; i < verificationCode.length; i++) {
        ctx.save();
        let x = Math.random() * (110 - 40 + 1) + 40;
        let y = Math.random() > 0.5 ? Math.random() * 60 : -Math.random() * 60;
        ctx.translate(canvasW / verificationCode.length * i + x, y);
        let deg = Math.random() > 0.5 ? Math.random() * 60 : -Math.random() * 60;
        ctx.translate(0, canvasH / 2);
        ctx.rotate(Math.PI / 180 * deg);
        ctx.font = "100px HYShangWeiShouShuW-Regular";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = getDarkColor();
        ctx.fillText(getCode()[i], 0, 0);
        ctx.restore();
    }
}

// 绘制背景颜色
function drawCanvasBackgroundColor() {
    canvas.style.backgroundColor = getLightColor();
}

// 绘制干扰线
function drawInterferingLine(num) {
    for (let i = 0; i < num; i++) {
        ctx.save();
        let x0 = Math.random() * canvasW / 2;
        let y0 = Math.random() * canvasH;
        let x1 = Math.random() * (canvasW - canvasW / 2 + 1) + canvasW / 2;
        let y1 = Math.random() * canvasH;
        ctx.beginPath();
        ctx.strokeStyle = getDarkColor();
        ctx.moveTo(x0, y0);
        ctx.lineTo(x1, y1);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
}

// 绘制干扰点
function drawInterferingPoint(num) {
    for (let i = 0; i < num; i++) {
        ctx.save();
        let x = Math.random() * canvasW;
        let y = Math.random() * canvasH;
        ctx.beginPath();
        ctx.fillStyle = Math.random() > 0.5 ? getLightColor() : getDarkColor();
        ctx.arc(x, y, 1, 0 * Math.PI, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
        ctx.restore();
    }
}

// 获取四位验证码
function getCode() {
    var char = [];
    for (let i = 0; i <= 122; i++) {
        if (i >= 0 && i <= 9) {
            char.push(i);
        }
        if (i >= 65 && i <= 90) {
            char.push(String.fromCharCode(i));
        }
        if (i >= 97 && i <= 122) {
            char.push(String.fromCharCode(i));
        }
    }
    var max = 61;
    var code = [];
    for (let j = 0; j < 4; j++) {
        var num = Math.floor(Math.random() * (max - 0 + 1) + 0);
        code.push(char.splice(num, 1));
        max--;
    }
    return code.join("");
}

// 获取一个随机的深色
function getDarkColor() {
    while (1) {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        // 深色的条件
        if (r * 0.299 + g * 0.578 + b * 0.114 < 192) {
            return "rgb(" + r + "," + g + "," + b + ")";
        }
    }
}

// 获取一个随机的浅色
function getLightColor() {
    while (1) {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        // 浅色的条件
        if (r * 0.299 + g * 0.578 + b * 0.114 >= 192) {
            return "rgb(" + r + "," + g + "," + b + ")";
        }
    }
}

袁成新（Chauncey Yuan）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例：canvas实现普通4位验证码

效果图html和样式 <style> * { margin: 0px; text-align: center; user-select: none; } body { padding-top: 30px; ...
复制链接

扫一扫

专栏目录