在html添加下雨的特效,HTML5 Canvas带镜像特效的下雨动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.onload = function(argument) {

window.requestAnimFrame = (function() {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

var canvas = document.getElementById('c');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight * 0.75;

var c = canvas.getContext('2d'),

w = canvas.width,

h = canvas.height;

var rain_number = 1000,

rain_array = [];

function Rain() {

this.x = Math.random() * w;

this.y = Math.random() * h;

this.vector_x = Math.random() - 0.5 > 0 ? Math.random() : -Math.random();

this.vector_y = Math.random() / 1.5;

this.line_length = Math.random() * 5 + 20;

}

Rain.prototype.update = function() {

this.x += this.vector_x;

this.y += this.vector_y * this.line_length;

if (this.x > w || this.x < 0) {

this.x = Math.random() * w;

}

if (this.y > h) {

this.y = 0;

}

}

function init() {

c.strokeStyle = 'snow';

c.fillStyle = 'white';

c.lineWidth = 1;

for (var i = 0; i < rain_number; i++) {

rain_array.push(new Rain())

}

}

init();

start();

function start() {

c.fillStyle = "rgba(0,0,0,0.5)";

c.fillRect(0, 0, w, h);

for (var i = 0; i < rain_array.length; i++) {

c.beginPath();

c.moveTo(rain_array[i].x, rain_array[i].y);

c.lineTo(rain_array[i].x + rain_array[i].vector_x, rain_array[i].y + rain_array[i].vector_y * rain_array[i].line_length);

rain_array[i].update();

c.stroke();

}

c.closePath();

window.requestAnimFrame(start);

}

window.onresize = function() {}

}