html产生镜面效果,HTML5/Canvas带镜面反射特效的下雨动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

;

(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(10,10,10,1)');

grad.addColorStop(1, 'rgba(10,10,10,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);