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.3;
    }
    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(80,90,100,1)');
    grad.addColorStop(1, 'rgba(80,90,100,0)');
    this.ctx.save();
    this.ctx.scale(1, -1);
    this.ctx.translate(0, this.floor * -2);
    this.ctx.filter = 'blur(3px) 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