一、效果简介

在上一期文章中，长沙网站建设教您制作了一个气泡动态背景，但是有人说这个背景不够美观，缺乏一点意境感。

那么今天，我们就再教您一招：制作一个沉浸感十足的星辰旋转背景效果，让页面看起来更加幽静与深邃，更好的展现出咱们独特的气质。

二、效果解析

在效果图中可能看不出来啥，毕竟是静态的图片也看不出背景的变化效果。而实际的效果用文字描述出来，就是无数的圆在围绕着页面中心旋转，在圆旋转的同时透明度也在不断的变化，看起来就像星星一样明灭闪烁。

长沙网站制作还是使用Canvas进行绘制，通过JavaScript核心代码：

const N = 900;
...
for (let i = 0; i < N; i++) {
    stars.push({
        r: 200 + Math.random() * maxR,   // 距中心距离
        a: Math.random() * 6.2832,       // 初始角度
        z: (Math.random() - 0.5) * 300,  // 大小变化
        s: 0.8 + Math.random() * 2.5,    // 基础大小
        b: 0.3 + Math.random() * 0.7,    // 基础亮度
        sp: 0.02 + Math.random() * 0.04, 
        off: Math.random() * 6.2832      
    });
}

制作出900个圆，并对所有圆的位置、大小、亮度等等属性进行定义，为之后的旋转提供数据基础。

核心代码二：

for (let s of stars) {
    const rr = s.r + ox * 0.2;
    const aa = s.a + ang * (0.3 + 0.7 * (s.r / (minWH * 0.7)));
    const px = Math.cos(aa) * rr + ox;
    const py = Math.sin(aa) * rr + oy;
    const sc = 1 + s.z / 400;
    const sz = s.s * sc * 0.8;
    const tw = 0.7 + 0.3 * Math.sin(now * s.sp + s.off);
    const al = s.b * tw * (0.7 + 0.3 * (1 - Math.abs(s.z) / 300));
    // 绘制圆形星星
    x.beginPath();
    x.arc(px, py, Math.max(0.5, sz), 0, 6.2832);
    x.fillStyle = `rgba(220,235,255,${al})`;
    x.fill();
    // 大星星加发光效果
    if (sz > 1.8) {
        x.shadowColor = 'rgba(150,180,255,0.2)';
        x.shadowBlur = 12;
        x.fill();
        x.shadowBlur = 0;
    }
}

在JavaScript的控制下，所有的圆会围绕着屏幕中心不断旋转。又因为每一个圆都被附加了独立的大小、透明度、变化速度等属性，让它们看起来向星星一样忽闪忽闪的。

同时，又因为内外圈转速不一致，越靠近中心的圆旋转速度会较慢、离中心点越远的圆旋转会越快。再搭配上深蓝色的背景，最终实现长沙网站设计想要的星辰旋转效果。

完整JavaScript代码图如下:

三、效果视频展示：

四、效果的应用场景

因为长沙网站建设使用的是原生的Canvas和JavaScript来实现这个效果，并没有引入第三方库，所以完全可以适应在各种不同的场景里。比如用户信息页面，游戏登录页面等等。

另外，在星空中有流星、恒星也是很合理的，所以在扩展方面我们可以增加代码，做出一个流星滑过星空的特效；或者调整圆的大小同时改变运动方向，制作出一个会缓慢运动的恒星，来丰富星空的背景。

以上就是长沙网站开发整理出的星辰旋转背景的制作方法,希望对您有所帮助！

长沙蒲公英网络专业提供高效且优质的网站优化服务，为您的企业的发展保驾护航！欢迎来电咨询:0731-84069615。