侧边栏壁纸

Canvas下雨

2024年03月17日 518阅读 0评论 1点赞

ltvhseev.png

  • JS代码:

    (function (window, document) {
                var Vector2 = (function () {
                  function Vector2(x, y) {
                    this.x = x || 0;
                    this.y = y || 0;
                  }
                  return Vector2;
                })();
              
                Vector2.prototype.add = function (addend) {
                  this.x += addend.x;
                  this.y += addend.y;
                };
              
                var RainDrop = (function () {
                  function RainDrop(parent) {
                    this.size = 2;
                    this.parent = parent;
                    this.init();
                  }
                  return RainDrop;
                })();
              
                RainDrop.prototype.init = function () {
                  this.life = 0;
                  this.ttl = Math.random() * 500 + 300;
                  this.position = new Vector2(Math.random() * window.innerWidth, 0);
                  this.velocity = new Vector2(
                    0.5 - Math.random() * 1,
                    Math.random() * 1 + 0.2
                  );
                  this.terminalVelocity = 8;
                };
              
                RainDrop.prototype.update = function () {
                  if (
                    this.position.x > window.innerWidth ||
                    this.position.x < -this.size ||
                    this.life > this.ttl
                  )
                    this.init();
                  if (this.position.y > this.parent.floor) {
                    this.position.y = this.parent.floor - this.size;
                    this.velocity.y *= -0.2 - Math.random() * 0.2;
                  }
                  this.life++;
                  this.position.add(this.velocity);
                  this.velocity.y += 0.1;
                };
              
                var Rain = (function () {
                  function Rain(args) {
                    this.props = args;
                    this.rainDrops = [];
                    this.init();
                  }
                  return Rain;
                })();
              
                Rain.prototype.init = function () {
                  this.createCanvas();
                  this.resize();
                  this.loop();
                };
              
                Rain.prototype.resize = function () {
                  var attr =
                    "position: absolute; z-index: -99; top: 0; left: 0; height: 100vh; width: 100vw;";
              
                  this.canvas.setAttribute("style", attr);
              
                  this.dimensions = {
                    width: window.innerWidth,
                    height: window.innerHeight
                  };
              
                  this.canvas.width = this.dimensions.width;
                  this.canvas.height = this.dimensions.height;
                  this.floor = this.dimensions.height * 0.7;
                };
              
                Rain.prototype.createCanvas = function () {
                  this.canvas = document.createElement("canvas");
              
                  this.ctx = this.canvas.getContext("2d");
              
                  document.body.appendChild(this.canvas);
                };
              
                Rain.prototype.draw = function () {
                  this.ctx.fillStyle = this.props.backgroundColor;
                  this.ctx.fillRect(0, 0, this.dimensions.width, this.floor);
                  for (var i = 0, len = this.rainDrops.length; i < len; i++) {
                    var rainDrop = this.rainDrops[i];
                    rainDrop.update();
                    this.ctx.fillStyle = this.props.rainColor;
                    this.ctx.fillRect(
                      rainDrop.position.x,
                      rainDrop.position.y,
                      rainDrop.size,
                      rainDrop.size
                    );
                  }
                  this.reflect();
                };
              
                Rain.prototype.reflect = function () {
                  var grad = this.ctx.createLinearGradient(
                    this.dimensions.width / 2,
                    this.floor * 0.6,
                    this.dimensions.width / 2,
                    this.floor
                  );
                  grad.addColorStop(0, "rgba(20,30,40,1)");
                  grad.addColorStop(1, "rgba(20,30,40,0)");
                  this.ctx.save();
                  this.ctx.scale(1, -1);
                  this.ctx.translate(0, this.floor * -2);
                  this.ctx.filter = "blur(2px) saturate(150%)";
                  this.ctx.drawImage(
                    this.canvas,
                    0,
                    0,
                    this.dimensions.width,
                    this.floor,
                    0,
                    0,
                    this.dimensions.width,
                    this.floor
                  );
                  this.ctx.fillStyle = grad;
                  this.ctx.fillRect(0, 0, this.dimensions.width, this.floor);
                  this.ctx.restore();
                };
              
                Rain.prototype.loop = function () {
                  var timeout,
                    self = this;
                  if (self.rainDrops.length < self.props.rainDropCount) {
                    timeout = window.setTimeout(function () {
                      self.rainDrops.push(new RainDrop(self));
                    }, Math.random() * 200);
                  } else if (timeout) {
                    timeout = null;
                    window.clearTimeout(timeout);
                  }
                  self.draw();
                  window.requestAnimationFrame(self.loop.bind(self));
                };
              
                window.onload = function () {
                  var args = {
                    rainDropCount: 500,
                    rainColor: "rgba(150,180,255,0.8)",
                    backgroundColor: "rgba(10,10,10,0.5)"
                  };
              
                  var rain = new Rain(args);
              
                  window.onresize = function () {
                    rain.resize();
                  };
                };
              
                window.requestAnimationFrame = (function () {
                  return (
                    window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback) {
                      window.setTimeout(callback, 1000 / 60);
                    }
                  );
                })();
              })(this, document);
1
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
舔狗日记