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.........完整代码请登录后点击上方下载按钮下载查看