- BC20270270's blog
1
-
BC20270270
LV 1
@
2025-5-27 19:30:21
html
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #000;
overflow: hidden;
height: 100vh;
}
canvas {
position: fixed;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
// 粒子配置
const particles = [];
const particleCount = 150;
const maxDistance = 100;
const colors = ['#00ff88', '#00ffff', '#ff00ff', '#ffff00'];
// 粒子类
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2 + 1;
this.speedX = Math.random() * 2 - 1;
this.speedY = Math.random() * 2 - 1;
this.color = colors[Math.floor(Math.random() * colors.length)];
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x > canvas.width + 50) this.x = -50;
else if (this.x < -50) this.x = canvas.width + 50;
if (this.y > canvas.height + 50) this.y = -50;
else if (this.y < -50) this.y = canvas.height + 50;
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// 创建粒子
function init() {
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
// 绘制连接线
function drawLines() {
for (let a = 0; a < particles.length; a++) {
for (let b = a; b < particles.length; b++) {
const dx = particles[a].x - particles[b].x;
const dy = particles[a].y - particles[b].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < maxDistance) {
ctx.beginPath();
ctx.strokeStyle = particles[a].color;
ctx.globalAlpha = 1 - distance / maxDistance;
ctx.lineWidth = 0.5;
ctx.moveTo(particles[a].x, particles[a].y);
ctx.lineTo(particles[b].x, particles[b].y);
ctx.stroke();
}
}
}
}
// 动画循环
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 添加光晕效果
const gradient = ctx.createRadialGradient(
canvas.width/2, canvas.height/2, 0,
canvas.width/2, canvas.height/2, Math.max(canvas.width, canvas.height)/2
);
gradient.addColorStop(0, 'rgba(0, 255, 136, 0.1)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
drawLines();
requestAnimationFrame(animate);
}
init();
animate();
// 添加鼠标互动
canvas.addEventListener('mousemove', (e) => {
particles.forEach(particle => {
const dx = e.clientX - particle.x;
const dy = e.clientY - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
particle.x -= dx * 0.05;
particle.y -= dy * 0.05;
}
});
});
</script>
</body>
</html>