JavaScript渲染的星空背景，点缀你我的编程之夜

2023-11-22 20:49:13

引入星夜元素

JavaScript渲染的星空背景能够显著提升网页或应用界面的设计感和用户体验。通过模拟真实的星空效果，增加页面的互动性和美观性，有助于缓解长时间面对屏幕带来的疲劳。本篇博客将探讨如何使用纯JavaScript来实现一个动态的星空背景，并加入流星动画。

实现原理

利用HTML5的<canvas>元素，结合CSS3的样式和JavaScript的逻辑处理能力，可以轻松创建出令人赞叹的视觉效果。关键在于通过编程生成随机分布的星星以及控制它们的运动轨迹。

创建星夜场景

首先，需要在HTML文档中添加一个<canvas>元素：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>星空背景</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas id="starCanvas"></canvas>
<script src="star.js"></script>
</body>
</html>

JavaScript代码

接下来，编写JavaScript来控制星星的创建与运动。

window.onload = function() {
    var canvas = document.getElementById('starCanvas');
    var context = canvas.getContext('2d');

    // 设置canvas尺寸为整个屏幕大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var stars = [];

    function Star(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 1.5 + 0.3;
    }

    Star.prototype.draw = function(context) {
        context.beginPath();
        context.arc(this.x, this.y, this.size, 0, Math.PI*2);
        context.fillStyle = '#fff';
        context.fill();
    };

    Star.prototype.updatePosition = function() {
        // 简单的向下滑动效果
        this.y += this.size * 0.5;
        if (this.y > canvas.height) this.y = 0;
    }

    function renderStars() {
        stars.forEach(function(star) {
            star.draw(context);
            star.updatePosition();
        });
    }

    // 初始化星星
    for(var i=0; i<100; ++i){
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        stars.push(new Star(x, y));
    }

    function loop(){
        context.clearRect(0, 0, canvas.width, canvas.height);
        renderStars();
        requestAnimationFrame(loop);
    }
    loop();
};

这段代码首先定义了一个Star构造函数，用于生成具有随机大小和位置的星星。然后通过循环创建了100颗星星，并在每次渲染时更新它们的位置，实现移动效果。

添加流星动画

为了使星空背景更加生动有趣，可以加入流星元素。流星可以通过简单的线条绘制来模拟其划过天空的效果：

function Meteor(x, y) {
    this.x = x;
    this.y = y;
    this.length = Math.random() * 50 + 10;
}

Meteor.prototype.draw = function(context) {
    context.beginPath();
    context.moveTo(this.x - this.length/2, this.y);
    context.lineTo(this.x + this.length/2, this.y);
    context.strokeStyle = '#fff';
    context.lineWidth = this.length / 30;
    context.stroke();
};

Meteor.prototype.updatePosition = function() {
    if (this.y > canvas.height) {
        // 到达屏幕底部时重新生成流星
        this.x = Math.random() * canvas.width;
        this.y = -this.length/2;
    } else {
        this.y += 5; // 控制流星速度
    }
};

// 在渲染函数中加入流星更新和绘制逻辑
function renderMeteors(meteors) {
    meteors.forEach(function(meteor) {
        meteor.draw(context);
        meteor.updatePosition();
    });
}

var meteors = [];
for(var i=0; i<10; ++i){
    var x = Math.random() * canvas.width;
    var y = -Math.random() * 50;
    meteors.push(new Meteor(x, y));
}

function loop(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    renderStars();
    renderMeteors(meteors); // 添加流星渲染
    requestAnimationFrame(loop);
}