前端开发验证码怎么做？Canvas版验证码生成

前端开发验证码|前端js开发

直接上码html 代码

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

function randomNum(min, max) {

return Math.floor(Math.random() * (max – min) + min);

}

function randomColor(min, max) {

var _r = randomNum(min, max);

var _g = randomNum(min, max);

var _b = randomNum(min, max);

return “rgb(” + _r + “,” + _g + “,” + _b + “)”;

}

document.getElementById(“canvas”).onclick = function (e) {

e.preventDefault();

drawPic();

};

function drawPic() {

var $canvas = document.getElementById(“canvas”);

var _str = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”;

var _picTxt = “”;

var _num = 6;

var _width = $canvas.width;

var _height = $canvas.height;

var ctx = $canvas.getContext(“2d”);

ctx.textBaseline = “bottom”;

ctx.fillStyle = randomColor(180, 240);

ctx.fillRect(0, 0, _width, _height);

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

var x = (_width – 10) / _num * i + 10;

var y = randomNum(_height / 2, _height);

var deg = randomNum(-45, 45);

var txt = _str[randomNum(0, _str.length)];

_picTxt += txt;

ctx.fillStyle = randomColor(10, 100);

ctx.font = randomNum(16, 40) + “px SimHei”;

ctx.translate(x, y);

ctx.rotate(deg * Math.PI / 180);

ctx.fillText(txt, 0, 0);

ctx.rotate(-deg * Math.PI / 180);

ctx.translate(-x, -y);

}

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

ctx.strokeStyle = randomColor(90, 180);

ctx.beginPath();

ctx.moveTo(randomNum(0, _width), randomNum(0, _height));

ctx.lineTo(randomNum(0, _width), randomNum(0, _height));

ctx.stroke();

}

for (var i = 0; i < _num * 10; i++) {

ctx.fillStyle = randomColor(0, 255);

ctx.beginPath();

ctx.arc(randomNum(0, _width), randomNum(0, _height), 1, 0, 2 * Math.PI);

ctx.fill();

}

return _picTxt;

}

drawPic();

</script>

</body>

</html>

网站前端开发_前端开发者

https://www.rokub.com

» 本文来自：前端开发者 » 《前端开发验证码怎么做？Canvas版验证码生成》

» 本文链接地址：https://www.rokub.com/2735.html

» 您也可以订阅本站：https://www.rokub.com

前端开发验证码怎么做？Canvas版验证码生成

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

回顶部

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

回顶部

评论抢沙发