在FastAdmin后台登录页面增加canvas粒子背景，可以通过以下步骤实现：
- 在登录页面对应的HTML模板文件中，引入
canvas-particle-background.js脚本。 - 编写
canvas-particle-background.js脚本来创建粒子背景动画。 - 修改样式文件（如果需要）以确保canvas全屏覆盖。
以下是实现这个功能的示例代码：
HTML (login.html):
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<!-- 登录表单 -->
<div id="login-main">
...
</div>
<!-- 引入粒子背景脚本 -->
<script src="/assets/js/canvas-particle-background.js"></script>
</body>
</html>
JavaScript (canvas-particle-background.js):
document.addEventListener('DOMContentLoaded', function () {
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style = 'position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none;';
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
var particles = [];
var particleCount = 500;
function Particle() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.velocity = {
x: (Math.random() - 0.5) * 5,
y: (Math.random() - 0.5) * 5
};
this.radius = Math.random() * 1.5;
this.color = '#FFFFFF';
}
Particle.prototype.update = function () {
this.x += this.velocity.x;
this.y += this.velocity.y;
if (this.x > canvas.width || this.x < 0) {
this.velocity.x = -this.velocity.x;
}
if (this.y > canvas.height || this.y < 0) {
this.velocity.y = -this.velocity.y;
}
};
Particle.prototype.draw = function () {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
context.fillStyle = this.color;
context.fill();
};
function init() {
for (var i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
function animate() {
requestAnimationFrame(animate);
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
}
init();
animate();
});
CSS (style.css):
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden; /* 确保canv