用js怎么写出星星一闪一闪的

使用JavaScript实现星星一闪一闪的效果

核心观点：使用HTML5 Canvas、使用CSS动画、结合JavaScript控制动画、利用随机性模拟自然效果。 其中使用HTML5 Canvas是实现复杂动画效果的关键之一，能够提供丰富的图形绘制功能和高效的渲染性能。

HTML5 Canvas元素允许我们通过脚本 (通常是JavaScript) 绘制图形。我们可以利用它来创建复杂的动画效果，例如星星一闪一闪的效果。通过结合JavaScript和CSS，我们可以实现更加动态和交互的视觉效果。

一、使用HTML5 Canvas创建基本星星效果

HTML5 Canvas是一个功能强大的绘图工具，能够通过JavaScript代码绘制各种图形和动画。以下是如何使用Canvas创建基本的星星效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twinkling Stars</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="starCanvas"></canvas>
    <script>
        const canvas = document.getElementById('starCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        class Star {
            constructor(x, y, radius, alpha) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.alpha = alpha;
                this.alphaDirection = Math.random() > 0.5 ? 1 : -1;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
                ctx.fill();
                ctx.closePath();
            }
            update() {
                this.alpha += this.alphaDirection * 0.01;
                if (this.alpha <= 0 || this.alpha >= 1) {
                    this.alphaDirection *= -1;
                }
                this.draw();
            }
        }
        let stars = [];
        for (let i = 0; i < 200; i++) {
            let x = Math.random() * canvas.width;
            let y = Math.random() * canvas.height;
            let radius = Math.random() * 2;
            let alpha = Math.random();
            stars.push(new Star(x, y, radius, alpha));
        }
        function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            stars.forEach(star => star.update());
        }
        animate();
    </script>
</body>
</html>

二、使用CSS动画增强效果

除了使用Canvas，我们还可以使用CSS动画来增强星星的闪烁效果。这部分内容包括如何使用CSS3的关键帧动画来控制星星的透明度变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twinkling Stars</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            width: 2px;
            height: 2px;
            animation: twinkle 2s infinite;
        }
        @keyframes twinkle {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <script>
        for (let i = 0; i < 200; i++) {
            let star = document.createElement('div');
            star.className = 'star';
            star.style.left = `${Math.random() * window.innerWidth}px`;
            star.style.top = `${Math.random() * window.innerHeight}px`;
            star.style.animationDuration = `${Math.random() * 3 + 1}s`;
            document.body.appendChild(star);
        }
    </script>
</body>
</html>

三、结合JavaScript控制动画细节

为了让星星的闪烁效果更加自然，我们可以结合JavaScript进行更细致的控制，例如随机化每颗星星的闪烁频率和透明度变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twinkling Stars</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="starCanvas"></canvas>
    <script>
        const canvas = document.getElementById('starCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        class Star {
            constructor(x, y, radius, alpha, alphaChange) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.alpha = alpha;
                this.alphaChange = alphaChange;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
                ctx.fill();
                ctx.closePath();
            }
            update() {
                this.alpha += this.alphaChange;
                if (this.alpha <= 0 || this.alpha >= 1) {
                    this.alphaChange *= -1;
                }
                this.draw();
            }
        }
        let stars = [];
        for (let i = 0; i < 200; i++) {
            let x = Math.random() * canvas.width;
            let y = Math.random() * canvas.height;
            let radius = Math.random() * 2;
            let alpha = Math.random();
            let alphaChange = (Math.random() * 0.02) + 0.01;
            stars.push(new Star(x, y, radius, alpha, alphaChange));
        }
        function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            stars.forEach(star => star.update());
        }
        animate();
    </script>
</body>
</html>

四、随机性模拟自然效果

为了让星星看起来更加自然和逼真，随机性是必不可少的。通过随机化星星的位置、大小、透明度和闪烁频率，我们可以模拟出更接近真实夜空的效果。

let stars = [];
for (let i = 0; i < 200; i++) {
    let x = Math.random() * canvas.width;
    let y = Math.random() * canvas.height;
    let radius = Math.random() * 2;
    let alpha = Math.random();
    let alphaChange = (Math.random() * 0.02) + 0.01;
    stars.push(new Star(x, y, radius, alpha, alphaChange));
}

五、优化性能

在实现动画效果时，性能优化是一个重要的考虑因素。为了确保动画流畅，我们可以使用requestAnimationFrame来驱动动画循环，并尽量减少每帧绘制的计算量。

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    stars.forEach(star => star.update());
}
animate();

通过这种方式，我们可以确保动画在大多数设备上都能流畅运行。

六、结合多种技术实现复杂效果

在实际开发中，我们可以结合多种技术来实现更加复杂和生动的效果。例如，可以使用Canvas绘制基本的星星动画，使用CSS实现更复杂的光效，使用JavaScript控制整体的动画逻辑和交互效果。

总结： 使用HTML5 Canvas、CSS动画和JavaScript相结合，可以创建出逼真且高效的星星一闪一闪的效果。通过随机化参数和优化性能，可以使动画更加自然和流畅。