当前位置：首页 > news >正文

用html实现数字生命

news 2025/7/3 10:16:01

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数学粒子动画</title><style>body {margin: 0;padding: 0;background-color: #000;display: flex;justify-content: center;align-items: center;height: 100vh;overflow: hidden;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}.container {position: relative;width: 100%;max-width: 900px;text-align: center;}canvas {background-color: black;border-radius: 8px;box-shadow: 0 0 20px rgba(0, 100, 255, 0.3);}.title {color: rgba(255, 255, 255, 0.85);margin-bottom: 20px;font-size: 2.2rem;text-shadow: 0 0 10px rgba(0, 150, 255, 0.8);letter-spacing: 1.5px;}.description {color: rgba(200, 220, 255, 0.7);max-width: 600px;margin: 20px auto;font-size: 1.1rem;line-height: 1.6;}.controls {margin: 20px 0;}.control-btn {background: rgba(30, 60, 120, 0.7);color: white;border: none;padding: 10px 20px;margin: 0 10px;border-radius: 4px;cursor: pointer;font-size: 1rem;transition: all 0.3s ease;outline: none;}.control-btn:hover {background: rgba(50, 100, 200, 0.9);transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0, 100, 255, 0.4);}.footer {color: rgba(150, 180, 220, 0.6);margin-top: 25px;font-size: 0.9rem;}</style>
</head>
<body><div class="container"><h1 class="title">数学粒子动画</h1><canvas id="particleCanvas" width="900" height="900"></canvas><div class="description">这个动画展示了10,000个粒子按照复杂的数学公式运动。每个粒子的位置由三角函数的组合计算得出，创造出令人着迷的视觉效果。</div><div class="controls"><button id="pauseBtn" class="control-btn">暂停</button><button id="resetBtn" class="control-btn">重置</button><button id="speedUpBtn" class="control-btn">加速</button><button id="slowDownBtn" class="control-btn">减速</button></div><div class="footer">HTML5 Canvas实现 | 数学公式驱动的艺术</div></div><script>// 获取Canvas元素和上下文const canvas = document.getElementById('particleCanvas');const ctx = canvas.getContext('2d');// 粒子数组const particles = [];const numParticles = 10000;// 时间变量和速度控制let t = 0;let animationSpeed = 1;let isPaused = false;// 初始化粒子function initParticles() {particles.length = 0;for (let i = 0; i <= numParticles; i++) {const x = i % 200;const y = i / 43;const k = 5 * Math.cos(x / 14) * Math.cos(y / 30);const e = y / 8 - 13;const d = (k * k + e * e) / 59 + 4;const a = Math.atan2(k, e);particles.push({k, e, d, a,x: 0, // 将在更新时计算y: 0  // 将在更新时计算});}}// 更新粒子位置function updateParticles() {t += Math.PI / 20 * animationSpeed;for (let i = 0; i < particles.length; i++) {const p = particles[i];const q = 60 - 3 * Math.sin(p.a * p.e) + p.k * (3 + 4 / p.d * Math.sin(p.d * p.d - t * 2));const c = p.d / 2 + p.e / 99 - t / 18;p.x = q * Math.sin(c) + 200;p.y = (q + p.d * 9) * Math.cos(c) + 200;}}// 绘制粒子function drawParticles() {ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';ctx.fillRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < particles.length; i++) {const p = particles[i];// 根据位置计算颜色const colorValue = Math.floor(150 + 100 * Math.sin(t/5 + p.x/50));ctx.fillStyle = `rgba(150, ${colorValue}, 255, 0.4)`;ctx.beginPath();ctx.arc(p.x, p.y, 1.2, 0, Math.PI * 2);ctx.fill();}}// 动画循环function animate() {if (!isPaused) {updateParticles();drawParticles();}requestAnimationFrame(animate);}// 事件监听器document.getElementById('pauseBtn').addEventListener('click', function() {isPaused = !isPaused;this.textContent = isPaused ? '继续' : '暂停';});document.getElementById('resetBtn').addEventListener('click', function() {t = 0;animationSpeed = 1;initParticles();});document.getElementById('speedUpBtn').addEventListener('click', function() {animationSpeed = Math.min(animationSpeed + 0.5, 5);});document.getElementById('slowDownBtn').addEventListener('click', function() {animationSpeed = Math.max(animationSpeed - 0.5, 0.5);});// 初始化并开始动画initParticles();animate();</script>
</body>
</html>