流动雨滴效果

2024-01-27 19:12

文章标签 效果雨滴流动

本文主要是介绍流动雨滴效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<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");
// 2d绘图上下文对象
const ctx = c.getContext("2d", {// 配置提升渲染效率willReadFrequently: true,
});
// 设置canvas 的宽度  window.innerWidth 是窗口的内部宽度，表示当前浏览器窗口的宽度
let w = (c.width = window.innerWidth) * devicePixelRatio;
// 设置canvas 的高度  window.innerWidth 是窗口的内部高度，表示当前浏览器窗口的高度
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);// 创建二次或三次贝塞尔曲线 接收6个参数，分别是控制点1的x坐标、y坐标，控制点2的x坐标、y坐标，结束点的x坐标、y坐标。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 = [];
// 全局方法 窗口大小改变时重新设置canvas的宽度和高度
function resize() {w = c.width = window.innerWidth;h = c.height = window.innerHeight;
}
// 全局方法 页面加载时初始化所有的雨滴对象并添加到drops数组中
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();