Canvas 几十行JS代码实现的下雨动画

canvas black&white rain[ 思路就是绘制随机长度的线条，从最上面开始移动。稍微复杂一点的地方是雨滴是一个非均匀宽度的线条对象，中间宽两边窄有点像纺锤，本例使用frameback和framefront参数来控制雨滴形状。

canvas, rain, 教程

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),

opts = {

count: w / 10,
        baseSize: 1,
        addedSize: 2,
        velX: 1,
        velY: 4,
        framesBack: 8, //control the drop line higher portion
        framesFront: 4 //control the drop line lower portion
    },

drops = [];

function anim() {

window.requestAnimationFrame(anim);

ctx.fillStyle = '#222';
    ctx.fillRect(0, 0, w, h);
    ctx.strokeStyle = '#eee';

if (drops.length < opts.count)
        drops.push(new Drop);

drops.map(function(drop) {
        drop.step();
    });
}

function Drop() {

this.x = (Math.random() * w) | 0;
    this.y = 0;

this.size = opts.baseSize + opts.addedSize * Math.random();

this.vx = opts.velX * this.size;
    this.vy = opts.velY * this.size;
}
Drop.prototype.step = function() {

this.x += this.vx
    this.y += this.vy;

if (this.x - opts.framesBack * this.vy > w)
        this.x = -opts.framesFront * this.vy;

if (this.y - opts.framesBack * this.vy > h)
        this.y = -opts.framesFront * this.vy;

var x = this.x - opts.framesBack * this.vx,
        y = this.y - opts.framesBack * this.vy;

for (var i = 1; i < opts.framesBack; ++i) {

ctx.lineWidth = i / opts.framesBack * this.size;

ctx.beginPath();
        ctx.moveTo(x, y);

x += this.vx;
        y += this.vy;

ctx.lineTo(x, y);
        ctx.stroke();
    }
    for (var i = 0; i < opts.framesFront; ++i) {

ctx.lineWidth = this.size - i / opts.framesFront * this.size;

ctx.beginPath();
        ctx.moveTo(x, y);

x += this.vx;
        y += this.vy;

ctx.lineTo(x, y);
        ctx.stroke();
    }
}
anim();
window.addEventListener('resize', function() {

w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
})

编译

CSS

HTML

canvas black&white rain[ 思路就是绘制随机长度的线条，从最上面开始移动。稍微复杂一点的地方是雨滴是一个非均匀宽度的线条对象，中间宽两边窄有点像纺锤，本例使用frameback和framefront参数来控制雨滴形状。

canvas, rain, 教程

编辑器支持Emmet

快捷键

canvas black&white rain[ 思路就是绘制随机长度的线条，从最上面开始移动。稍微复杂一点的地方是雨滴是一个非均匀宽度的线条对象，中间宽两边窄有点像纺锤，本例使用frameback和framefront参数来控制雨滴形状。

canvas, rain, 教程

HTML5 Canvas梅雨季节动画（在雨中撑伞行走的路人）

使用SVG和Canvas实现的水泡分裂动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：