Canvas下雨

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

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

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg