html5水墨效果,HTML5 Canvas 类似PS中水墨喷溅晕染的喷笔效果

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var stage = document.getElementById("stage"),

raf = window.requestAnimationFrame,

width, height

ctx = stage.getContext("2d"),

mx = 0, my = 0;

window.addEventListener('mousemove', function(e) {

mx = e.x;

my = e.y;

});

var clear = function() {

width = (stage.width = stage.offsetWidth);

height = (stage.height = stage.offsetHeight);

if (!mx) mx = width / 2;

if (!my) my = height / 2;

var grd = ctx.createLinearGradient(0, 0, width, 0);

for (var i = 0; i <= 1; i += 0.001) {

grd.addColorStop(i, "hsla(" + (i * 360).toFixed() + ",100%,50%, 0.25)");

}

ctx.fillStyle = 'white';

ctx.fillRect(0, 0, width, height);

ctx.fillStyle = grd;

};

clear();

window.addEventListener("click", clear);

window.addEventListener('resize', clear);

var // (0,1]

r = Math.random,

// (0,v]

rv = function(v) {

return r() * v;

},

// (-v * 0.5, v * 0.5]

rc0 = function(v) {

return rv(v) - v / 2;

};

var fade = (function() {

var li = 0;

return function(i) {

if (i < li + 66) return;

li = i;

var data = ctx.getImageData(0, 0, width, height);

var d = data.data;

for (var i = 8; i < d.length - 8; i += 4) {

var r = ((d[i - 8] + d[i - 4] + d[i + 4] + d[i + 8] >> 2) + d[i]) >> 1;

var g = ((d[i - 7] + d[i - 3] + d[i + 5] + d[i + 9] >> 2) + d[i + 1]) >> 1;

var b = ((d[i - 6] + d[i - 2] + d[i + 6] + d[i + 10] >> 2) + d[i + 2]) >> 1;

d[i] = r + 2;

d[i + 1] = g + 2;

d[i + 2] = b + 2;

}

ctx.putImageData(data, 0, 0);

};

})();

(function loop(t) {

fade(t);

for (var i = 0; i < rv(10) | 0; i++) {

ctx.beginPath();

var ang = rv(Math.PI * 2),

dist = rv(25) + 2,

size = rv(12) + 2,

tx = mx + Math.cos(ang) * dist,

ty = my + Math.sin(ang) * dist;

ctx.arc(tx, ty,

size, 0,

Math.PI * 2);

ctx.strokeStyle = 'hsla(' + tx / width * 360 + ',100%,50%,0.1)';

ctx.stroke();

ctx.fill();

}

raf(loop);

})();