效果图
html和样式
<style>
* {
margin: 0px;
text-align: center;
user-select: none;
}
body {
padding-top: 30px;
}
canvas {
cursor: pointer;
}
</style>
</head>
<body>
<canvas width="600" height="200"></canvas>
<div class="main">点击画布换一个验证码</div>
js部分:
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var canvasW = canvas.width;
var canvasH = canvas.height;
// 页面加载完成时,执行一次
window.addEventListener("load", init);
// 点击画布时,执行一次
canvas.addEventListener("click", init);
// 初始化
function init() {
// 清除画布
ctx.clearRect(0, 0, canvasW, canvasH);
// 绘制验证码
drawVerificationCode();
// 绘制背景颜色
drawCanvasBackgroundColor();
// 绘制干扰线
drawInterferingLine(5);
// 绘制干扰点
drawInterferingPoint(50);
}
// 绘制验证码
function drawVerificationCode() {
let verificationCode = getCode();
for (let i = 0; i < verificationCode.length; i++) {
ctx.save();
let x = Math.random() * (110 - 40 + 1) + 40;
let y = Math.random() > 0.5 ? Math.random() * 60 : -Math.random() * 60;
ctx.translate(canvasW / verificationCode.length * i + x, y);
let deg = Math.random() > 0.5 ? Math.random() * 60 : -Math.random() * 60;
ctx.translate(0, canvasH / 2);
ctx.rotate(Math.PI / 180 * deg);
ctx.font = "100px HYShangWeiShouShuW-Regular";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = getDarkColor();
ctx.fillText(getCode()[i], 0, 0);
ctx.restore();
}
}
// 绘制背景颜色
function drawCanvasBackgroundColor() {
canvas.style.backgroundColor = getLightColor();
}
// 绘制干扰线
function drawInterferingLine(num) {
for (let i = 0; i < num; i++) {
ctx.save();
let x0 = Math.random() * canvasW / 2;
let y0 = Math.random() * canvasH;
let x1 = Math.random() * (canvasW - canvasW / 2 + 1) + canvasW / 2;
let y1 = Math.random() * canvasH;
ctx.beginPath();
ctx.strokeStyle = getDarkColor();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
// 绘制干扰点
function drawInterferingPoint(num) {
for (let i = 0; i < num; i++) {
ctx.save();
let x = Math.random() * canvasW;
let y = Math.random() * canvasH;
ctx.beginPath();
ctx.fillStyle = Math.random() > 0.5 ? getLightColor() : getDarkColor();
ctx.arc(x, y, 1, 0 * Math.PI, 2 * Math.PI);
ctx.fill();
ctx.closePath();
ctx.restore();
}
}
// 获取四位验证码
function getCode() {
var char = [];
for (let i = 0; i <= 122; i++) {
if (i >= 0 && i <= 9) {
char.push(i);
}
if (i >= 65 && i <= 90) {
char.push(String.fromCharCode(i));
}
if (i >= 97 && i <= 122) {
char.push(String.fromCharCode(i));
}
}
var max = 61;
var code = [];
for (let j = 0; j < 4; j++) {
var num = Math.floor(Math.random() * (max - 0 + 1) + 0);
code.push(char.splice(num, 1));
max--;
}
return code.join("");
}
// 获取一个随机的深色
function getDarkColor() {
while (1) {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
// 深色的条件
if (r * 0.299 + g * 0.578 + b * 0.114 < 192) {
return "rgb(" + r + "," + g + "," + b + ")";
}
}
}
// 获取一个随机的浅色
function getLightColor() {
while (1) {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
// 浅色的条件
if (r * 0.299 + g * 0.578 + b * 0.114 >= 192) {
return "rgb(" + r + "," + g + "," + b + ")";
}
}
}