前端生成验证码-canvas
2022-06-15 本文已影响0人
银角大王__
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入验证码">
<canvas id="myCanvas" width="70px" height="27px" style="border:1px solid #d3d3d3;" onclick="createCode()"></canvas>
<script>
createCode()
function createCode() {
code = "";
var codeLength = 4;//验证码的长度，可变
var canvas = document.getElementById('myCanvas');//获取画布
var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//所有候选组成验证码的字符
for (var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 36);
code += selectChar[charIndex];
}
if (canvas) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, 70, 27);
ctx.font = "20px arial";
// 创建渐变
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变填色
ctx.strokeStyle = gradient;
ctx.strokeText(code, 5, 20);//画布上添加验证码
console.log(111,code);
}
}
</script>
</body>
</html>
