颜色浸染动画特效

Bleeding Color Art 颜色艺术作品，右键可保存为图片。可用于艺术类或者恐怖电影血迹浸染之类的宣传页面。

canvas, color

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var c = document.getElementById("canv");
var $ = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;

var px = 0;
var py = 0;
var blend = 100;

function splotch(x, y, r, col) {
    $.fillStyle = 'rgba(' + col.r + ', ' + col.g + ', ' + col.b + ', ' + col.a + ')';
    $.beginPath();
    $.arc(x, y, r, 0, Math.PI * 2, false);
    $.fill();
}

function bleed(px, py, pr, pcol) {
    var i = 0;
    var x = px;
    var y = py;
    var r = pr;
    var col = pcol;

function inv() {
        window.requestAnimationFrame(inv);
        splotch(x, y, r * (i / blend), col);
        if (i == blend) window.cancelAnimationFrame(inv);
        i++;
    }
    inv();
}

function anim() {
    window.requestAnimationFrame(anim);
    var px = Math.floor(Math.random() * c.width);
    var py = Math.floor(Math.random() * c.height);
    var pr = Math.floor(Math.random() * 50);
    var pcol = {
        r: Math.floor(Math.random() * 255),
        g: Math.floor(Math.random() * 255),
        b: Math.floor(Math.random() * 255),
        a: 1 / blend
    }
    bleed(px, py, pr, pcol);
}
anim();

/*___
left click to reload | 
right click to download image
___*/
window.addEventListener('mousedown', function(e) {
    if (e.button == 0)
        document.location.href = document.location.href;
    else if (e.button == 2) {
        e.preventDefault();
        var img = c.toDataURL("image/png");
        var dl = document.createElement('a');
        dl.href = img;
        dl.download = "canvas.png";
        var event = document.createEvent('MouseEvents');
        event.initEvent("click", true, false);
        dl.dispatchEvent(event)
    }
}, false);

window.addEventListener('touchstart', function(e) {
    e.preventDefault();
    document.location.href = document.location.href;
}, false);

/*___Resize___*/
window.addEventListener('resize', function() {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
}, false);

编译

CSS

HTML

Bleeding Color Art 颜色艺术作品，右键可保存为图片。可用于艺术类或者恐怖电影血迹浸染之类的宣传页面。

canvas, color

编辑器支持Emmet

快捷键

Bleeding Color Art 颜色艺术作品，右键可保存为图片。 可用于艺术类或者恐怖电影血迹浸染之类的宣传页面。

canvas, color

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

HTML5柏林噪音算法实现的墨汁浸染背景图片过渡动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Bleeding Color Art 颜色艺术作品，右键可保存为图片。可用于艺术类或者恐怖电影血迹浸染之类的宣传页面。