js实现黑洞
实现黑洞效果的 JavaScript 方法
使用 Canvas 绘制动态黑洞效果，结合引力模拟和粒子系统。
const canvas = document.getElementById('blackHoleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const blackHole = {
x: canvas.width / 2,
y: canvas.height / 2,
mass: 10000
};
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 2 - 1;
this.speedY = Math.random() * 2 - 1;
}
update() {
const dx = blackHole.x - this.x;
const dy = blackHole.y - this.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const force = blackHole.mass / (distance * distance);
this.speedX += dx / distance * force;
this.speedY += dy / distance * force;
this.x += this.speedX;
this.y += this.speedY;
}
draw() {
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
function init() {
for (let i = 0; i < 500; i++) {
particles.push(new Particle());
}
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
// 绘制黑洞
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(blackHole.x, blackHole.y, 30, 0, Math.PI * 2);
ctx.fill();
// 绘制吸积盘
const gradient = ctx.createRadialGradient(
blackHole.x, blackHole.y, 30,
blackHole.x, blackHole.y, 100
);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
gradient.addColorStop(0.5, 'rgba(200, 100, 255, 0.5)');
gradient.addColorStop(1, 'rgba(100, 0, 200, 0.2)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(blackHole.x, blackHole.y, 100, 0, Math.PI * 2);
ctx.fill();
requestAnimationFrame(animate);
}
init();
animate();HTML 基础结构
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 黑洞模拟</title>
<style>
body { margin: 0; overflow: hidden; background: #000; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="blackHoleCanvas"></canvas>
<script src="blackhole.js"></script>
</body>
</html>效果增强技巧
增加引力透镜效果模拟光线弯曲：
function drawGravitationalLensing() {
const lensingRadius = 150;
const steps = 36;
for (let i = 0; i < steps; i++) {
const angle = (i / steps) * Math.PI * 2;
const x = blackHole.x + Math.cos(angle) * lensingRadius;
const y = blackHole.y + Math.sin(angle) * lensingRadius;
const gradient = ctx.createRadialGradient(
x, y, 0,
x, y, 20
);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
}
}性能优化建议
使用对象池管理粒子对象避免频繁创建销毁：
const particlePool = [];
const activeParticles = [];
function getParticle() {
if (particlePool.length > 0) {
return particlePool.pop();
}
return new Particle();
}
function recycleParticle(particle) {
particlePool.push(particle);
}交互功能实现
添加鼠标交互控制黑洞位置：
canvas.addEventListener('mousemove', (e) => {
blackHole.x = e.clientX;
blackHole.y = e.clientY;
});
