实现一个动态的星空特效

要实现一个动态的星空特效，你可以使用HTML的<canvas>元素和JavaScript。下面是一个简单的示例，展示如何创建一个动态的星空背景：

  1. HTML：
<!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, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        canvas {
            background: black;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="starCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>
  1. JavaScript (script.js 文件)：
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
let stars = []; // 存储星星的数组
const numStars = 1000; // 星星的数量
const maxStarSize = 3; // 最大星星大小
const minStarSize = 1; // 最小星星大小
const maxSpeed = 0.05; // 最大速度
const minSpeed = 0.01; // 最小速度

// 设置canvas大小与窗口一致
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

// 创建星星对象
function createStar() {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const size = Math.random() * (maxStarSize - minStarSize) + minStarSize;
    const speed = Math.random() * (maxSpeed - minSpeed) + minSpeed;
    return { x, y, size, speed };
}

// 初始化星星
function initStars() {
    stars = [];
    for (let i = 0; i < numStars; i++) {
        stars.push(createStar());
    }
}

// 绘制星星
function drawStars() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    stars.forEach(star => {
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    });
}

// 更新星星位置
function updateStars() {
    stars.forEach(star => {
        star.y += star.speed;
        if (star.y > canvas.height) {
            star.y = 0; // 星星从底部重新出现
        }
    });
}

// 动画循环
function animate() {
    drawStars();
    updateStars();
    requestAnimationFrame(animate); // 循环调用animate函数
}

// 监听窗口大小变化事件，重新调整canvas大小并初始化星星
window.addEventListener('resize', () => {
    resizeCanvas();
    initStars(); // 可选，如果你想在窗口大小变化时重新生成星星，可以保留这行代码。
});

// 初始化并执行动画循环
resizeCanvas();
initStars();
animate();

这段代码创建了一个黑色的<canvas>元素，并在其中动态地绘制了星星。星星从画布底部向上移动，并在移出画布时重新从底部出现，从而创建了一个无限循环的星空动画效果。你可以根据需要调整星星的数量、大小、速度和颜色等参数。

posted @ 2024-12-21 09:24  王铁柱6  阅读(243)  评论(0)    收藏  举报