JS实现HTML星空流星特效 - 辉辉狐的笔记

转载，仅作稍微修改并格式化保存

在需要显示特效的地方添加canvas标签

<canvas id="universe"></canvas>

在HTML尾部引入以下JS

function universe() {
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var e, t, o, n, a = .05,
        s = document.getElementById("universe"),
        c = !0,
        i = "226,225,224",
        r = [];

    function l() {
        e = window.innerWidth, t = window.innerHeight, o = .216 * e, s.setAttribute("width", e), s.setAttribute("height", t)
    }

    function d() {
        n.clearRect(0, 0, e, t);
        for (var o = r.length, a = 0; a < o; a++) {
            var s = r[a];
            s.move(), s.fadeIn(), s.fadeOut(), s.draw()
        }
    }

    function b() {
        this.reset = function() {
            this.giant = u(3), this.comet = !this.giant && !c && u(10), this.x = m(0, e - 10), this.y = m(0, t), this.r = m(1.1, 2.6), this.dx = m(a, 6 * a) + (this.comet + 1 - 1) * a * m(50, 120) + .1, this.dy = -m(a, 6 * a) - (this.comet + 1 - 1) * a * m(50, 120), this.fadingOut = null, this.fadingIn = !0, this.opacity = 0, this.opacityTresh = m(.2, 1 - .4 * (this.comet + 1 - 1)), this.do =
                m(5e-4, .002) + .001 * (this.comet + 1 - 1)
        }, this.fadeIn = function() {
            this.fadingIn && (this.fadingIn = !(this.opacity > this.opacityTresh), this.opacity += this.do)
        }, this.fadeOut = function() {
            this.fadingOut && (this.fadingOut = !(this.opacity < 0), this.opacity -= this.do / 2, (this.x > e || this.y < 0) && (this.fadingOut = !1, this.reset()))
        }, this.draw = function() {
            if (n.beginPath(), this.giant) n.fillStyle = "rgba(180,184,240," + this.opacity + ")", n.arc(this.x, this.y, 2, 0, 2 * Math.PI, !1);
            else if (this.comet) {
                n.fillStyle = "rgba(" + i + "," + this.opacity + ")", n.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, !1);
                for (var e = 0; e < 30; e++) n.fillStyle = "rgba(" + i + "," + (this.opacity - this.opacity /
                    20 *
                    e) + ")", n.rect(this.x - this.dx / 4 * e, this.y - this.dy / 4 * e - 2, 2, 2), n.fill()
            } else n.fillStyle = "rgba(226,225,142," + this.opacity + ")", n.rect(this.x, this.y, this.r, this.r);
            n.closePath(), n.fill()
        }, this.move = function() {
            this.x += this.dx, this.y += this.dy, !1 === this.fadingOut && this.reset(), (this.x > e - e / 4 || this.y < 0) && (this.fadingOut = !0)
        }, setTimeout((function() {
            c = !1
        }), 50)
    }

    function u(e) {
        return Math.floor(1e3 * Math.random()) + 1 < 10 * e
    }

    function m(e, t) {
        return Math.random() * (t - e) + e
    }
    l(), window.addEventListener("resize", l, !1),
        function() {
            n = s.getContext("2d");
            for (var e = 0; e < o; e++) r[e] = new b, r[e].reset();
            d()
        }(),
        function e() {
            d(), window.requestAnimationFrame(e)
        }()
}
universe()

效果展示：

目录