canvas多款飘动的云层之上流星雨夜景动画效果代码-html代码-BFW代码库

canvas多款飘动的云层之上流星雨夜景动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas多款飘动的云层之上流星雨夜景动画效果代码，单击鼠标可切换不同的景色动画。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


</head>

<body>



    <script>
        document.body.style = "background:#000;overflow:hidden;margin:0";const t = document.createElement("canvas");t.style = "position:absolute;transform:translate(-50%,0%);left:50%;height:100%", document.body.appendChild(t);const e = (t = 1, e = 0) => e + (t - e) * Math.random(),i = (t, e = 0, i = 1) => t < e ? e : t > i ? i : t;let r = 1;const a = (t = 1, e = 0) => (r ^= r << 13, r ^= r >>> 17, r ^= r << 5, e + (t - e) * Math.abs(r % 1e9) / 1e9);class o {constructor(t = 1, e = 1, i = 1, r = 1) {this.r = t, this.g = e, this.b = i, this.a = r;}copy() {return new o(this.r, this.g, this.b, this.a);}add(t) {return new o(this.r + t.r, this.g + t.g, this.b + t.b, this.a + t.a);}subtract(t) {return new o(this.r - t.r, this.g - t.g, this.b - t.b, this.a - t.a);}multiply(t) {return new o(this.r * t.r, this.g * t.g, this.b * t.b, this.a * t.a);}divide(t) {return new o(this.r / t.r, this.g / t.g, this.b / t.b, this.a / t.a);}scale(t, e = t) {return new o(this.r * t, this.g * t, this.b * t, this.a * e);}clamp() {return new o(i(this.r), i(this.g), i(this.b), i(this.a));}lerp(t, e) {return this.add(t.subtract(this).scale(i(e)));}setHSLA(t = 0, e = 0, i = 1, r = 1) {const a = i < .5 ? i * (1 + e) : i + e - i * e,o = 2 * i - a,l = (t, e, i) => (i = (i % 1 + 1) % 1) < 1 / 6 ? t + 6 * (e - t) * i : i < .5 ? e : i < 2 / 3 ? t + (e - t) * (2 / 3 - i) * 6 : t;return this.r = l(o, a, t + 1 / 3), this.g = l(o, a, t), this.b = l(o, a, t - 1 / 3), this.a = r, this;}mutate(t = .05, e = 0) {return new o(this.r + a(t, -t), this.g + a(t, -t), this.b + a(t, -t), this.a + a(e, -e)).clamp();}rgba() {return `rgb(${255 * this.r | 0},${255 * this.g | 0},${255 * this.b | 0},${this.a})`;}rgbaInt() {return (255 * this.r | 0) + (255 * this.g << 8) + (255 * this.b << 16) + (255 * this.a << 24);}}let l, s, n, h, d, g, c, b, p, u;function w() {l = 0 | e(1e9), s = e(), n = new o().setHSLA(s, e(), e(.5)), h = new o().setHSLA(s + e(.3, .7), e(), e(.8, .2)), d = e(1e3), g = ((t = new o(), i = new o(0, 0, 0, 1), r) => r ? t.lerp(i, e()) : new o(e(t.r, i.r), e(t.g, i.g), e(t.b, i.b), e(t.a, i.a)))(new o(.1, .1, .1), new o(.9, .9, .9)), c = e(12, 1) * (e() < .5 ? 1 : -1), b = e() < .5, p = e() < .5, u = e() < .03 ? 0 : 1 + e() ** 2 * 5 | 0;}w(), onclick = t => w();let f = 0,m = 0,S = 0,C = t.getContext("2d"),y = (Math.sin, Math.cos, Math.tan, e => {requestAnimationFrame(y), e < S - 3 || (S = Math.max(S + 1e3 / 60, e), f = m++ / 60, function (e) {t.width = 1920, t.height .........完整代码请登录后点击上方下载按钮下载查看