流动雨滴效果

最新推荐文章于 2024-06-13 14:30:24 发布

 勿忘初心

最新推荐文章于 2024-06-13 14:30:24 发布

阅读量747

点赞数 20

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_64740434/article/details/135865340

版权

<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();