HTML5 Canvas带镜像特效的下雨动画

Rain with reflect effects

html5, rain

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 6109
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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() {}
}

编译

CSS

HTML

Rain with reflect effects

html5, rain

编辑器支持Emmet

快捷键

Rain with reflect effects

html5, rain

HTML5/Canvas带镜面反射特效的下雨动画

HTML5 Canvas图像粒子化渐显动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：