原生js图形验证码代码

原生js图形验证码代码

原生js图形验证码代码

HTML代码:

<canvas id="yzm" width="150" height="50"></canvas>
<a href="javascript:;" id="a1">看不清,换一个</a>

CSS代码:

 #yzm {
    border:1px solid #009900;
    background:url(https://media.mybj123.com/wp-content/uploads/2021/11/1636593980-eccbc87e4b5ce2f.png)
}

JS代码:

window.addEventListener("DOMContentLoaded", function() {
    var a1 = document.getElementById("a1");
    var yzm = document.getElementById("yzm");
    var cxt = yzm.getContext("2d");

    function showYzm() {
        cxt.clearRect(0, 0, 150, 50); //清空画布区域
        var str = "012345678910ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var validate = "";
        var position = 0;
        var x, y;
        var fontSize = 30;
        cxt.beginPath();
        cxt.fillStyle = "#aaaaaa";
        for (var i = 0; i < 4; i++) {
            x = 20 + (i * 30);
            y = 25 + Math.ceil(Math.random() * 20);
            fontSize = 10 + Math.ceil(Math.random() * 20);
            cxt.font = "bold " + fontSize + "px Arial";
            position = Math.ceil(Math.random() * 1000) % 36;
            cxt.fillText(str.substr(position, 1), x, y, 300);
        }
    }
    showYzm();
    a1.addEventListener("click", function() {
        showYzm();
    });
});

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 原生js图形验证码代码

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们