前端开发验证码怎么做？Canvas版验证码生成
摘要：前端开发验证码|前端js开发 直接上码html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Document</title> </head> <bo……
前端开发验证码|前端js开发
直接上码html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>
<canvas id=”canvas” width=”150″ height=”50″></canvas>
<script>
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>
网站前端开发_前端开发者
» 本文来自：前端开发者 » 《前端开发验证码怎么做？Canvas版验证码生成》
» 本文链接地址：https://www.rokub.com/2735.html
» 您也可以订阅本站：https://www.rokub.com
近期评论