html 0.5个像素,HTML5 像素涟漪

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var Promise, colors, upgradeElement;

Promise = Q.Promise;

colors = ["black", "aliceblue", "darkcyan", "lightyellow", "coral", "dimgray", "lavender", "teal", "lightgoldenrodyellow", "tomato", "gray", "lightsteelblue", "darkslategray", "lemonchiffon", "orangered", "darkgray", "lightslategray", "darkgreen", "wheat", "red", "silver", "slategray", "green", "burlywood", "crimson", "lightgrey", "steelblue", "forestgreen", "tan", "mediumvioletred", "gainsboro", "royalblue", "seagreen", "khaki", "deeppink", "whitesmoke", "midnightblue", "mediumseagreen", "yellow", "hotpink", "white", "navy", "mediumaquamarine", "gold", "palevioletred", "snow", "darkblue", "darkseagreen", "orange", "pink", "ghostwhite", "mediumblue", "aquamarine", "sandybrown", "lightpink", "floralwhite", "blue", "palegreen", "darkorange", "thistle", "linen", "dodgerblue", "lightgreen", "goldenrod", "magenta", "antiquewhite", "cornflowerblue", "springgreen", "peru", "fuchsia", "papayawhip", "deepskyblue", "mediumspringgreen", "darkgoldenrod", "violet", "blanchedalmond", "lightskyblue", "lawngreen", "chocolate", "plum", "bisque", "skyblue", "chartreuse", "sienna", "orchid", "moccasin", "lightblue", "greenyellow", "saddlebrown", "mediumorchid", "navajowhite", "powderblue", "lime", "maroon", "darkorchid", "peachpuff", "paleturquoise", "limegreen", "darkred", "darkviolet", "mistyrose", "lightcyan", "yellowgreen", "brown", "darkmagenta", "lavenderblush", "cyan", "darkolivegreen", "firebrick", "purple", "seashell", "aqua", "olivedrab", "indianred", "indigo", "oldlace", "turquoise", "olive", "rosybrown", "darkslateblue", "ivory", "mediumturquoise", "darkkhaki", "darksalmon", "blueviolet", "honeydew", "darkturquoise", "palegoldenrod", "lightcoral", "mediumpurple", "mintcream", "lightseagreen", "cornsilk", "salmon", "slateblue", "azure", "cadetblue", "beige", "lightsalmon", "mediumslateblue"];

window.addEventListener('load', function() {

var click, element, j, len, ref;

ref = document.querySelectorAll('.withripple');

for (j = 0, len = ref.length; j < len; j++) {

element = ref[j];

upgradeElement(element);

}

requestAnimationFrame(function() {

return click();

});

return click = function() {

var event;

event = new Event('click');

event.clientX = element.getBoundingClientRect().width * Math.random();

event.clientY = element.getBoundingClientRect().height * Math.random();

element.dispatchEvent(event);

return setTimeout(click, Math.random() * 1000 + 500);

};

});

upgradeElement = function(element) {

return element.addEventListener('click', function(event) {

var calcRipple, canvas, context, key, ref, round1, value;

element.setAttribute('style', 'position:relative');

canvas = document.createElement('canvas');

ref = element.getBoundingClientRect();

for (key in ref) {

value = ref[key];

canvas.setAttribute(key, value);

}

element.appendChild(canvas);

calcRipple = function(t, max) {

var begin, i, opacity, scale;

i = t / max;

begin = .25;

scale = i + begin;

scale += (1 - begin) * i;

opacity = .5;

if (i + begin > 1) {

opacity -= (i + begin - 1) / begin * .5;

opacity = round1(opacity);

}

return {

scale: scale,

opacity: opacity

};

};

round1 = function(value) {

return Math.round(value * 10) / 10;

};

context = canvas.getContext('2d');

context.fillStyle = colors[(colors.length * Math.random()) | 0];

return new Promise(function(resolve, reject, notify) {

var deferred, h, height, i, j, k, length, max, next, pixelSize, pixels, ref1, ref2, size, v, width, x, y;

i = 0;

max = 60;

size = canvas.width > canvas.height ? canvas.width : canvas.height;

pixelSize = 15;

pixels = [];

length = size / pixelSize;

for (h = j = 0, ref1 = length; 0 <= ref1 ? j <= ref1 : j >= ref1; h = 0 <= ref1 ? ++j : --j) {

for (v = k = 0, ref2 = length; 0 <= ref2 ? k <= ref2 : k >= ref2; v = 0 <= ref2 ? ++k : --k) {

x = h * pixelSize;

y = v * pixelSize;

width = pixelSize;

height = pixelSize;

deferred = 0;

pixels.push({

x: x,

y: y,

width: width,

height: height,

deferred: deferred

});

}

}

requestAnimationFrame(function() {

notify(context.fillStyle);

return next();

});

return next = function() {

var a, aMove, b, bMove, l, len, opacity, pixel, red, ref3, scale;

ref3 = calcRipple(i, max), scale = ref3.scale, opacity = ref3.opacity;

width = canvas.width * scale;

height = canvas.height * scale;

x = event.clientX | 0;

y = event.clientY | 0;

canvas.setAttribute('style', "position:absolute;\ntop:0;\nleft:0;\nright:0;\nbottom:0;\nopacity:" + opacity + ";");

notify({

x: x,

y: y,

width: width,

height: height,

scale: scale,

opacity: opacity

});

size = width > height ? width : height;

for (l = 0, len = pixels.length; l < len; l++) {

pixel = pixels[l];

if (pixel.rendered) {

continue;

}

red = Math.atan2(pixel.y - y, pixel.x - x);

a = pixel.x - x;

aMove = a * Math.cos(red);

b = pixel.y - y;

bMove = b * Math.sin(red);

if (aMove + bMove < size / 2) {

if (scale > .25 && pixel.deferred < 3 && (Math.random() < 0.5)) {

pixel.deferred++;

continue;

}

context.fillRect(pixel.x, pixel.y, pixel.width, pixel.height);

pixel.rendered = true;

}

}

if (i++ === max) {

return resolve(i);

} else {

return requestAnimationFrame(next);

}

};

}).then(function(i) {

return element.removeChild(canvas);

});

});

};

}).call(this);