Canvas实现的油和水流动动画

Oil && Water

canvas, oil

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

var c = document.getElementById("canv"),
    $ = c.getContext("2d"),
    _c = document.createElement("canvas"),
    $$ = _c.getContext("2d"),
    den = 240,
    pts = [],
    w = c.width = _c.width = window.innerWidth / 1.2,
    h = c.height = _c.height = window.innerHeight / 1.8;

for (var i = 0; i < 100; i++) {
    var x = Math.random() * w,
        y = Math.random() * h,
        vx = (Math.random() * 3) - 6,
        vy = (Math.random() * 9) - 4,
        rad = Math.floor(Math.random() * 70) + 50;

pts.push({
        x: x,
        y: y,
        vx: vx,
        vy: vy,
        rad: rad
    });
};

var set = function() {
    $$.clearRect(0, 0, w, h);
    var len = pts.length;
    while (len--) {
        var p = pts[len];
        p.x += p.vx;
        p.y += p.vy;

if (p.x > w + p.rad) {
            p.x = 0 - p.rad;
        }
        if (p.x < 0 - p.rad) {
            p.x = w + p.rad;
        }
        if (p.y > h + p.rad) {
            p.y = 0 - p.rad;
        }
        if (p.y < 0 - p.rad) {
            p.y = h + p.rad;
        }

$$.beginPath();
        $$.globalCompositeOperation = 'lighter';
        var g = $$.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.rad);
        g.addColorStop(0, 'hsla(0,0%,0%,1)');
        g.addColorStop(0.5, 'hsla(0,0%,1.5%,.5)');
        g.addColorStop(1, 'hsla(0,0%,2%,0)');
        $$.fillStyle = g;
        $$.arc(p.x, p.y, p.rad, 0, Math.PI * 2);
        $$.fill();
    }
    go();
    window.requestAnimFrame(set);
}

编译

CSS

HTML

Oil && Water

canvas, oil

编辑器支持Emmet

快捷键

Oil && Water

canvas, oil

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

使用D3.js（Canvas）和SVG滤镜实现的彩色粘稠染料点滴滑落动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：