<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas黑洞动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.credit {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
z-index: 100;
}
.credit a {
color: #4CAF50;
text-decoration: none;
transition: color 0.3s;
}
.credit a:hover {
color: #FFD700;
}
</style>
</head>
<body>
<canvas id="blackHoleCanvas"></canvas>
<div class="credit">
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('blackHoleCanvas');
const ctx = canvas.getContext('2d');
// 设置画布大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 黑洞参数
const blackHole = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 100,
gravity: 0.5,
accretionDisk: []
};
// 粒子数组
let particles = [];
const particleCount = 200;
// 创建粒子
function createParticles() {
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 3 + 1,
color: `hsl(${Math.random() * 60 + 200}, 100%, 50%)`,
speed: Math.random() * 2 + 1,
angle: Math.random() * Math.PI * 2,
distance: Math.random() * 300 + 100
});
}
}
// 创建吸积盘
function createAccretionDisk() {
for (let i = 0; i < 100; i++) {
const angle = Math.random() * Math.PI * 2;
const distance = Math.random() * 150 + blackHole.radius;
const speed = 0.01 + Math.random() * 0.02;
blackHole.accretionDisk.push({
x: blackHole.x + Math.cos(angle) * distance,
y: blackHole.y + Math.sin(angle) * distance,
radius: Math.random() * 2 + 1,
color: `hsl(${Math.random() * 60 + 200}, 100%, ${Math.random() * 30 + 50}%)`,
angle: angle,
distance: distance,
speed: speed
});
}
}
// 绘制黑洞
function drawBlackHole() {
// 绘制事件视界
const gradient = ctx.createRadialGradient(
blackHole.x, blackHole.y, blackHole.radius * 0.5,
blackHole.x, blackHole.y, blackHole.radius
);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
gradient.addColorStop(0.7, 'rgba(50, 50, 50, 0.8)');
gradient.addColorStop(1, 'rgba(100, 100, 100, 0.5)');
ctx.beginPath();
ctx.arc(blackHole.x, blackHole.y, blackHole.radius, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
// 绘制奇点
ctx.beginPath();
ctx.arc(blackHole.x, blackHole.y, blackHole.radius * 0.2, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(0, 0, 0, 0.9)';
ctx.fill();
}
// 绘制吸积盘
function drawAccretionDisk() {
blackHole.accretionDisk.forEach(particle => {
// 更新位置
particle.angle += particle.speed;
particle.x = blackHole.x + Math.cos(particle.angle) * particle.distance;
particle.y = blackHole.y + Math.sin(particle.angle) * particle.distance;
// 绘制粒子
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
ctx.fill();
});
}
// 绘制粒子
function drawParticles() {
particles.forEach((particle, index) => {
// 计算粒子到黑洞的距离和角度
const dx = blackHole.x - particle.x;
const dy = blackHole.y - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
// 如果粒子距离黑洞足够近，则被吞噬
if (distance < blackHole.radius) {
// 在被吞噬的位置创建新粒子
particles.splice(index, 1);
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 3 + 1,
color: `hsl(${Math.random() * 60 + 200}, 100%, 50%)`,
speed: Math.random() * 2 + 1,
angle: Math.random() * Math.PI * 2,
distance: Math.random() * 300 + 100
});
return;
}
// 计算引力
const force = blackHole.gravity / (distance * distance * 0.001);
const angle = Math.atan2(dy, dx);
// 更新粒子位置
particle.x += Math.cos(angle) * force * particle.speed;
particle.y += Math.sin(angle) * force * particle.speed;
// 绘制粒子
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
ctx.fill();
// 绘制粒子轨迹
ctx.beginPath();
ctx.moveTo(particle.x, particle.y);
ctx.lineTo(
particle.x - Math.cos(angle) * 10,
particle.y - Math.sin(angle) * 10
);
ctx.strokeStyle = `${particle.color.replace(')', ', 0.3)').replace('hsl', 'hsla')}`;
ctx.lineWidth = particle.radius * 0.5;
ctx.stroke();
});
}
// 绘制引力透镜效果
function drawGravitationalLensing() {
const gradient = ctx.createRadialGradient(
blackHole.x, blackHole.y, blackHole.radius * 1.5,
blackHole.x, blackHole.y, blackHole.radius * 3
);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0.8)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.beginPath();
ctx.arc(blackHole.x, blackHole.y, blackHole.radius * 3, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
}
// 动画循环
function animate() {
// 清除画布
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制所有元素
drawGravitationalLensing();
drawAccretionDisk();
drawParticles();
drawBlackHole();
requestAnimationFrame(animate);
}
// 初始化
createParticles();
createAccretionDisk();
animate();
// 窗口大小调整时重置画布
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
blackHole.x = canvas.width / 2;
blackHole.y = canvas.height / 2;
});
});
</script>
</body>
</html>
扫一扫
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
