canvas圆圈背景粒子动画
canvas圆圈背景粒子动画
html:
<canvas style="position:fixed;z-index:-1;left:0;top:0;min-width:100vw;min-height:100vh;" width="9600" height="2700"></canvas>
js:
<script> //粒子动画
// JavaScript Document
"use strict";
window.bubbly = function (t) { var o = t || {},
e = function () { return Math.random()
},
r = o.canvas || document.createElement("canvas"),
n = r.width,
a = r.height; null === r.parentNode && (r.setAttribute("style", "position:fixed;z-index:-1;left:0;top:0;min-width:100vw;min-height:100vh;"), n = r.width = window.innerWidth, a = r.height = window.innerHeight, document.body.appendChild(r)); var i = r.getContext("2d");
i.shadowColor = o.shadowColor || "#fff",
i.shadowBlur = o.blur || 4; var l = i.createLinearGradient(0, 0, n, a);
l.addColorStop(0, o.colorStart || "#2AE"),
l.addColorStop(1, o.colorStop || "#17B"); for (var h = o.bubbles || Math.floor(.02 * (n + a)), d = [], c = 0; c < h; c++) d.push({
f: (o.bubbleFunc || function () { return "hsla(0, 0%, 100%, " + .1 * e() + ")"
}).call(),
x: e() * n,
y: e() * a,
r: 4 + e() * n / 50,
a: e() * Math.PI,
v: .5 + .5 * e()
}); ! function t() { if (null === r.parentNode) return cancelAnimationFrame(t); !1 !== o.animate && requestAnimationFrame(t),
i.globalCompositeOperation = "source-over",
i.fillStyle = l,
i.fillRect(0, 0, n, a),
i.globalCompositeOperation = o.compose || "lighter",
d.forEach(function (t) {
i.beginPath(),
i.arc(t.x, t.y, t.r, 0, 2 * Math.PI),
i.fillStyle = t.f,
i.fill(),
t.x += Math.cos(t.a) * t.v,
t.y += Math.sin(t.a) * t.v,
t.x - t.r > n && (t.x = -t.r),
t.x + t.r < 0 && (t.x = n + t.r),
t.y - t.r > a && (t.y = -t.r),
t.y + t.r < 0 && (t.y = a + t.r)
})
}()
};
bubbly(
{
colorStart: "#04246f",
colorStop: "#032775"
}); </script>来源：https://www.cnblogs.com/Byme/p/14785124.html