<html>
<head>
<meta name="Generator" content="EditPlus" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>流动雨滴效果title>
<style>
body {
overflow: hidden;
background: black;
}
style>
head>
<body>
<canvas id="canvas-club">canvas>
<script src="./js/2.流动雨滴效果.js">script>
body>
html>
const c = document.getElementById("canvas-club");
const ctx = c.getContext("2d", {
willReadFrequently: true,
});
let w = (c.width = window.innerWidth) * devicePixelRatio;
let h = (c.height = window.innerHeight) * devicePixelRatio;
const clearColor = "rgba(0, 0, 0, .1)";
const max = 30;
class Drop {
constructor() {
this.x = 0;
this.y = 0;
this.color = "hsl(180, 100%, 50%)";
this.w = 2;
this.h = 1;
this.vy = 0;
this.vw = 3;
this.vh = 1;
this.size = 2;
this.hit = 0;
this.a = 1;
this.va = 0.96;
}
init() {
this.x = random(0, w);
this.y = 0;
this.color = "hsl(180, 100%, 50%)";
this.w = 2;
this.h = 1;
this.vy = random(4, 5);
this.vw = 3;
this.vh = 1;
this.size = 2;
this.hit = random(h * 0.8, h * 0.9);
this.a = 1;
this.va = 0.96;
}
draw() {
if (this.y > this.hit) {
ctx.beginPath();
ctx.moveTo(this.x, this.y - this.h / 2);
ctx.bezierCurveTo(
this.x + this.w / 2,
this.y - this.h / 2,
this.x + this.w / 2,
this.y + this.h / 2,
this.x,
this.y + this.h / 2
);
ctx.bezierCurveTo(
this.x - this.w / 2,
this.y + this.h / 2,
this.x - this.w / 2,
this.y - this.h / 2,
this.x,
this.y - this.h / 2
);
ctx.strokeStyle = "hsla(180, 100%, 50%, " + this.a + ")";
ctx.stroke();
ctx.closePath();
} else {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size * 5);
}
this.update();
}
update() {
if (this.y < this.hit) {
this.y += this.vy;
} else {
if (this.a > 0.03) {
this.w += this.vw;
this.h += this.vh;
if (this.w > 100) {
this.a *= this.va;
this.vw *= 0.98;
this.vh *= 0.98;
}
} else {
this.init();
}
}
}
}
function random(min, max) {
return Math.random() * (max - min) + min;
}
const drops = [];
function resize() {
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
}
function setup() {
for (var i = 0; i < max; i++) {
(function (j) {
setTimeout(function () {
var o = new Drop();
o.init();
drops.push(o);
}, j * 200);
})(i);
}
}
function anim() {
ctx.fillStyle = clearColor;
ctx.fillRect(0, 0, w, h);
for (var i in drops) {
drops[i].draw();
}
requestAnimationFrame(anim);
}
window.addEventListener("resize", resize);
setup();
anim();
