闪烁星空背景（html/css）

Z_X_Lei

已于 2022-04-18 22:04:03 修改

阅读量2.1k

点赞数

分类专栏： WEB 文章标签：前端 html5

于 2022-04-18 21:59:41 首次发布

本文链接：https://blog.youkuaiyun.com/zsms1314/article/details/124260830

版权

HTML5 Canvas JavaScript 动态效果星空背景

关键词由优快云通过智能技术生成

WEB 专栏收录该内容

2 篇文章

订阅专栏

效果视频

starts

源码

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            background-color: black;
        }

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <meta charset="utf-8">
    <title>starts</title>
</head>
<body>
    <canvas id="stars"></canvas>
</body>

<script>
    var starCount = 1500;
    var starArr = new Array();

    var Star = function () {
        this.x = windowWidth * Math.random();
        this.y = 5000 * Math.random();
        this.text = ".";
        this.color = "white";
        this.randomColor = function () {
            var _r = Math.random();
            if (_r < 0.5) {
                this.color = "#333";
            } else {
                this.color = "white";
            }
        }
    }

    window.onload = function () {
        var starsE = document.getElementById("stars");
        windowWidth = window.innerWidth;
        starsE.width = windowWidth;
        starsE.height = window.innerHeight;
        context = starsE.getContext("2d");

        for (var i = 0; i < starCount; i++) {
            var star = new Star();
            star.randomColor();
            starArr.push(star);
        }

        showStars();
    }

    function showStars() {
        for (var n = 0; n < starCount; n++) {
            starArr[n].randomColor();
            context.fillStyle = starArr[n].color;
            context.fillText(starArr[n].text, starArr[n].x, starArr[n].y);
        }

        setTimeout("showStars()", 100);
    }
</script>
</html>