原生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://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();
    });
});

以上关于原生js图形验证码代码的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。