js实现宇宙星空背景效果的方法

2023年6月11日上午2:16 • JavaScript

为了实现宇宙星空背景效果，我们可以使用Canvas和JavaScript来实现。下面是步骤：

步骤1：HTML布局

<!DOCTYPE html>
<html>
    <head>
        <title>宇宙星空背景</title>
    </head>
    <body>
        <canvas id="sky"></canvas>
    </body>
    <script src="script.js"></script>
</html>

我们首先需要一个canvas元素，我们将其ID设置为sky，以便在JavaScript代码中引用它。将代码保存为index.html。

步骤2：JavaScript代码

var canvas = document.getElementById("sky");
var ctx = canvas.getContext("2d");
var stars = [];
var NUM_STARS = 200;

// 创建星星列表
function createStars() {
    for (var i = 0; i < NUM_STARS; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var radius = Math.random() * 2;
        stars.push({x:x, y:y, radius:radius});
    }
}

// 绘制一颗星星
function drawStar(x, y, radius) {
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
}

// 绘制所有的星星
function drawStars() {
    for (var i = 0; i < stars.length; i++) {
        drawStar(stars[i].x, stars[i].y, stars[i].radius);
    }
}

// 清空画布
function clear() {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// 更新星星的位置
function update() {
    for (var i = 0; i < stars.length; i++) {
        stars[i].x -= 1;
        if (stars[i].x < 0) {
            stars[i].x = canvas.width;
        }
    }
}

// 主循环
function loop() {
    clear();
    drawStars();
    update();
    requestAnimationFrame(loop);
}

// 启动程序
createStars();
loop();

该示例代码使用了Canvas API来获取canvas元素并在其上绘制星星。主要过程包括：

定义canvas变量和stars变量，stars变量用于存储所有的星星。
创建createStars函数，该函数负责在canvas区域内随机生成NUM_STARS个星星。
创建drawStar函数，该函数负责在canvas上绘制一颗星星。
创建drawStars函数，该函数负责在canvas上绘制所有的星星。
创建clear函数，该函数负责清空画布。
创建update函数，该函数负责更新星星的位置。
创建loop函数，该函数负责循环调用clear、drawStars和update函数，并使用requestAnimationFrame函数使循环不断运行。
启动程序。

示例1：改变星星的大小

要改变星星的大小，我们需要修改createStars函数和drawStar函数。将它们的代码修改为如下所示：

function createStars() {
    for (var i = 0; i < NUM_STARS; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var radius = Math.random() * 4;
        stars.push({x:x, y:y, radius:radius});
    }
}

function drawStar(x, y, radius) {
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
}

在createStars函数中，我们将星星的半径范围从0到2修改为0到4。在drawStar函数中，我们将星星的半径参数命名为radius，从而可以根据我们在createStars函数中定义的星星半径来绘制每个星星。

示例2：添加星云效果

要添加星云效果，我们需要修改drawStars函数，并添加一个新的函数drawCloud。修改后的drawStars代码如下：

function drawStars() {
    for (var i = 0; i < stars.length; i++) {
        var star = stars[i];
        drawStar(star.x, star.y, star.radius);
        if (i % 10 == 0) {
            drawCloud(star.x, star.y, star.radius);
        }
    }
}

function drawCloud(x, y, radius) {
    ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
    ctx.beginPath();
    ctx.arc(x, y, radius * 5, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
}

我们在drawStars函数中先绘制每个星星，然后检查星星的索引值是否是10的倍数。如果是，就使用drawCloud函数在星星周围绘制一个半径为5倍星星半径的圆形。我们使用rgba颜色，其中a参数为0.2，即半透明，使圆形呈现淡淡的白色。

最后，我们的宇宙星空背景效果就完成了。需要注意的是，在改进效果时，也要考虑到性能，以便在不降低用户体验的前提下实现更好的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现宇宙星空背景效果的方法 - Python技术站