- BC20270270's blog
2
-
BC20270270
LV 1
@
2025-5-27 19:31:39
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');
let frame = 0;
// 设置画布尺寸
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
// 新增效果配置
const effects = {
particles: {
count: 200,
maxDistance: 120,
colors: ['#00ff88', '#00ffff', '#ff00ff', '#ffff00']
},
stars: {
count: 300,
twinkleSpeed: 0.02
},
vortex: {
count: 8,
rotationSpeed: 0.004
},
hexagons: {
size: 80,
lineWidth: 1
}
};
// ======================
// 新增：星空背景
// ======================
class Star {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 1.5;
this.opacity = Math.random() * 0.5 + 0.5;
this.speed = Math.random() * 0.3 + 0.1;
}
update() {
this.y += this.speed;
if (this.y > canvas.height) this.reset();
this.opacity += (Math.random() - 0.5) * effects.stars.twinkleSpeed;
this.opacity = Math.max(0.2, Math.min(1, this.opacity));
}
draw() {
ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// ======================
// 新增：能量漩涡
// ======================
class Vortex {
constructor() {
this.angle = Math.random() * Math.PI * 2;
this.radius = Math.random() * 300 + 100;
this.speed = (Math.random() - 0.5) * effects.vortex.rotationSpeed;
this.color = effects.particles.colors[Math.floor(Math.random()*effects.particles.colors.length)];
}
update() {
this.angle += this.speed;
this.x = canvas.width/2 + Math.cos(this.angle) * this.radius;
this.y = canvas.height/2 + Math.sin(this.angle) * this.radius;
}
draw() {
ctx.strokeStyle = this.color;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(this.x, this.y, 15, 0, Math.PI * 2);
ctx.stroke();
}
}
// ======================
// 新增：六边形网格背景
// ======================
function drawHexagons() {
const size = effects.hexagons.size;
const cols = Math.ceil(canvas.width / size) + 1;
const rows = Math.ceil(canvas.height / size) + 1;
ctx.strokeStyle = `rgba(0, 255, 136, 0.1)`;
ctx.lineWidth = effects.hexagons.lineWidth;
for (let i = -1; i < rows; i++) {
for (let j = -1; j < cols; j++) {
const x = j * size * 1.5 + (i % 2) * size * 0.75;
const y = i * size * Math.sqrt(3)/2;
ctx.save();
ctx.translate(x, y);
ctx.rotate(frame * 0.001);
ctx.beginPath();
for (let k = 0; k < 6; k++) {
const angle = (k * Math.PI) / 3;
const xPos = size * Math.cos(angle);
const yPos = size * Math.sin(angle);
ctx.lineTo(xPos, yPos);
}
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
}
// ======================
// 粒子系统（原有效果升级）
// ======================
class Particle {
constructor() {
this.reset();
this.color = effects.particles.colors[Math.floor(Math.random()*effects.particles.colors.length)];
}
reset() {
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.tail = [];
}
update() {
this.tail.unshift({x: this.x, y: this.y});
if (this.tail.length > 5) this.tail.pop();
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() {
// 绘制粒子尾迹
this.tail.forEach((pos, index) => {
ctx.fillStyle = `${this.color}${Math.round(0.2 + (1 - index/5)*0.6).toString(16)}`;
ctx.beginPath();
ctx.arc(pos.x, pos.y, this.size*(1 - index/5), 0, Math.PI*2);
ctx.fill();
});
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
ctx.fill();
}
}
// ======================
// 初始化所有元素
// ======================
const particles = [];
const stars = [];
const vortexes = [];
function init() {
// 初始化粒子
for (let i = 0; i < effects.particles.count; i++) {
particles.push(new Particle());
}
// 初始化星空
for (let i = 0; i < effects.stars.count; i++) {
stars.push(new Star());
}
// 初始化漩涡
for (let i = 0; i < effects.vortex.count; i++) {
vortexes.push(new Vortex());
}
}
// ======================
// 动画循环
// ======================
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制六边形网格
drawHexagons();
// 更新绘制星空
stars.forEach(star => {
star.update();
star.draw();
});
// 更新绘制漩涡
vortexes.forEach(vortex => {
vortex.update();
vortex.draw();
});
// 更新绘制粒子
particles.forEach(particle => {
particle.update();
particle.draw();
});
// 添加中心光晕
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);
frame++;
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 < 150) {
const force = (150 - distance) / 50;
particle.x -= dx * 0.08 * force;
particle.y -= dy * 0.08 * force;
}
});
});
</script>
</body>
</html>