怎么用JS实现星空特效

使用JavaScript实现星空特效的步骤包括：创建画布、生成星星、绘制星星、添加动画效果。首先，我们需要创建一个HTML页面，并在页面中包含一个画布元素。然后，我们使用JavaScript生成和绘制星星，最后为星星添加动画效果，使其闪烁或移动。重点在于画布的创建、星星的生成和绘制、动画效果的实现。以下将详细描述如何实现这些步骤。

一、创建画布

要实现星空特效，首先需要在HTML页面中创建一个画布元素。可以使用 <canvas> 标签来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starry Sky Effect</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="starrySky"></canvas>
    <script src="starrySky.js"></script>
</body>
</html>

二、生成星星

在JavaScript中，我们需要生成星星的属性，例如位置、大小和亮度。可以使用一个数组来存储这些星星，并随机生成它们的属性。

// starrySky.js
const canvas = document.getElementById('starrySky');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const stars = [];
const numStars = 1000;
for (let i = 0; i < numStars; i++) {
    stars.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 1.5,
        alpha: Math.random()
    });
}

三、绘制星星

接下来，我们需要在画布上绘制这些星星。可以使用 arc 方法来绘制圆形的星星，并使用 fillStyle 设置颜色和亮度。

function drawStars() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    stars.forEach(star => {
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false);
        ctx.fillStyle = `rgba(255, 255, 255, ${star.alpha})`;
        ctx.fill();
    });
}

四、添加动画效果

为了使星星看起来更加生动，可以为它们添加闪烁和移动的动画效果。使用 requestAnimationFrame 实现平滑的动画。

function animateStars() {
    stars.forEach(star => {
        star.alpha += (Math.random() - 0.5) * 0.1;
        if (star.alpha < 0) star.alpha = 0;
        if (star.alpha > 1) star.alpha = 1;
        star.x += (Math.random() - 0.5) * 0.5;
        star.y += (Math.random() - 0.5) * 0.5;
        if (star.x < 0) star.x = canvas.width;
        if (star.x > canvas.width) star.x = 0;
        if (star.y < 0) star.y = canvas.height;
        if (star.y > canvas.height) star.y = 0;
    });
    drawStars();
    requestAnimationFrame(animateStars);
}
animateStars();

五、响应窗口大小变化

为了确保画布在窗口大小变化时能够正确调整，需要监听 resize 事件，并重新设置画布的宽度和高度。

window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    drawStars();
});

六、总结

通过上述步骤，我们实现了一个简单的星空特效。具体步骤包括：创建画布、生成星星、绘制星星、添加动画效果和响应窗口大小变化。可以根据需要进一步优化和扩展，例如添加颜色变化、星星尾巴效果等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starry Sky Effect</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="starrySky"></canvas>
    <script>
        const canvas = document.getElementById('starrySky');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        const stars = [];
        const numStars = 1000;
        for (let i = 0; i < numStars; i++) {
            stars.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                radius: Math.random() * 1.5,
                alpha: Math.random()
            });
        }
        function drawStars() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            stars.forEach(star => {
                ctx.beginPath();
                ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false);
                ctx.fillStyle = `rgba(255, 255, 255, ${star.alpha})`;
                ctx.fill();
            });
        }
        function animateStars() {
            stars.forEach(star => {
                star.alpha += (Math.random() - 0.5) * 0.1;
                if (star.alpha < 0) star.alpha = 0;
                if (star.alpha > 1) star.alpha = 1;
                star.x += (Math.random() - 0.5) * 0.5;
                star.y += (Math.random() - 0.5) * 0.5;
                if (star.x < 0) star.x = canvas.width;
                if (star.x > canvas.width) star.x = 0;
                if (star.y < 0) star.y = canvas.height;
                if (star.y > canvas.height) star.y = 0;
            });
            drawStars();
            requestAnimationFrame(animateStars);
        }
        animateStars();
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            drawStars();
        });
    </script>
</body>
</html>

通过以上代码，我们实现了一个简单的星空特效。这个示例展示了如何使用JavaScript和HTML5的 <canvas> 元素创建一个动态的、闪烁的星空效果。通过调整星星的数量、大小和闪烁频率，可以创建不同的星空效果。