使用Underscore实现的文本电流化特效

包括背景电流图和文本电流化动画，可自定义标题文本。鼠标点击能触发电流波。 2016年度作品候选（canvas）。

canvas, 文本特效

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var STEP_LENGTH = 1;
var CELL_SIZE = 10;
var BORDER_WIDTH = 2;
var MAX_FONT_SIZE = 500;
var MAX_MARKED_COUNT = 3;
var CELL_DISTANCE = CELL_SIZE + BORDER_WIDTH;

var BG_COLOR = '#1d2227';
var BORDER_COLOR = '#13191f';
var CELL_HIGHLIGHT = '#328bf6';
var ELECTRON_COLOR = '#00b07c';

var FONT_FAMILY = 'Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuan Yi Micro Hei", sans-serif';

var DPR = window.devicePixelRatio || 1;

var ACTIVE_ELECTRONS = [];
var PINNED_CELLS = [];

var MOVE_TRAILS = [
        [0, 1], // down
        [0, -1], // up
        [1, 0], // right
        [-1, 0]
    ]. // left
map(function(_ref) {
    var x = _ref[0];
    var y = _ref[1];
    return [x * CELL_DISTANCE, y * CELL_DISTANCE];
});

var END_POINTS_OFFSET = [
        [0, 0], // left top
        [0, 1], // left bottom
        [1, 0], // right top
        [1, 1]
    ]. // right bottom
map(function(_ref2) {
    var x = _ref2[0];
    var y = _ref2[1];
    return [x * CELL_DISTANCE - BORDER_WIDTH / 2, y * CELL_DISTANCE - BORDER_WIDTH / 2];
});

var FullscreenCanvas = function() {
    function FullscreenCanvas() {
        var disableScale = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0];

_classCallCheck(this, FullscreenCanvas);

var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');

this.canvas = canvas;
        this.context = context;
        this.disableScale = disableScale;

this.resizeHandlers = [];
        this.handleResize = _.debounce(this.handleResize.bind(this), 100);

this.adjust();

window.addEventListener('resize', this.handleResize);
    }

FullscreenCanvas.prototype.adjust = function adjust() {
        var canvas = this.canvas;
        var context = this.context;
        var disableScale = this.disableScale;
        var _window = window;
        var innerWidth = _window.innerWidth;
        var innerHeight = _window.innerHeight;

this.width = innerWidth;
        this.height = innerHeight;

var scale = disableScale ? 1 : DPR;

this.realWidth = canvas.width = innerWidth * scale;
        this.realHeight = canvas.height = innerHeight * scale;
        canvas.style.width = innerWidth + 'px';
        canvas.style.height = innerHeight + 'px';

context.scale(scale, scale);
    };

FullscreenCanvas.prototype.clear = function clear() {
        var context = this.context;

context.clearRect(0, 0, this.width, this.height);
    };

FullscreenCanvas.prototype.makeCallback = function makeCallback(fn) {
        fn(this.context, this);
    };

FullscreenCanvas.prototype.composeBackground = function composeBackground(background) {
        var opacity = arguments.length <= 1 || arguments[1] === undefined ? 0.1 : arguments[1];

return this.paint(function(ctx, _ref3) {
            var realWidth = _ref3.realWidth;
            var realHeight = _ref3.realHeight;
            var width = _ref3.width;
            var height = _ref3.height;

ctx.save();

ctx.globalCompositeOperation = 'source-over';
            ctx.globalAlpha = opacity;

ctx.drawImage(background, 0, 0, realWidth, realHeight, 0, 0, width, height);

ctx.restore();
        });
    };

FullscreenCanvas.prototype.paint = function paint(fn) {
        if (!_.isFunction(fn)) return;

this.makeCallback(fn);

return this;
    };

FullscreenCanvas.prototype.repaint = function repaint(fn) {
        if (!_.isFunction(fn)) return;

this.clear();

return this.paint(fn);
    };

FullscreenCanvas.prototype.onResize = function onResize(fn) {
        if (!_.isFunction(fn)) return;

this.resizeHandlers.push(fn);
    };

FullscreenCanvas.prototype.handleResize = function handleResize() {
        var resizeHandlers = this.resizeHandlers;

if (!resizeHandlers.length) return;

this.adjust();

resizeHandlers.forEach(this.makeCallback.bind(this));
    };

FullscreenCanvas.prototype.renderIntoView = function renderIntoView() {
        var zIndex = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
        var target = arguments.length <= 1 || arguments[1] === undefined ? document.body : arguments[1];
        var canvas = this.canvas;

canvas.style.position = 'absolute';
        canvas.style.left = '0px';
        canvas.style.top = '0px';
        canvas.style.zIndex = zIndex;

target.appendChild(canvas);
    };

return FullscreenCanvas;
}();

var Electron = function() {
    function Electron() {
        var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
        var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];

var _ref4 = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];

var _ref4$lifeTime = _ref4.lifeTime;
        var lifeTime = _ref4$lifeTime === undefined ? 3 * 1e3 : _ref4$lifeTime;
        var _ref4$speed = _ref4.speed;
        var speed = _ref4$speed === undefined ? STEP_LENGTH : _ref4$speed;
        var _ref4$color = _ref4.color;
        var color = _ref4$color === undefined ? ELECTRON_COLOR : _ref4$color;

_classCallCheck(this, Electron);

this.expireAt = Date.now() + lifeTime;
        this.speed = speed;
        this.color = color;
        this.shadowColor = this.buildShadowColor(color);

this.radius = BORDER_WIDTH / 2;
        this.current = [x, y];
        this.visited = {};
        this.setDest(this.randomPath());
    }

Electron.prototype.buildShadowColor = function buildShadowColor(color) {
        return 'rgba(' + color.match(/[0-9a-f]{2}/ig).map(function(hex) {
            return parseInt(hex, 16);
        }).join(', ') + ', 0.8)';
    };

Electron.prototype.randomPath = function randomPath() {
        var _current = this.current;
        var x = _current[0];
        var y = _current[1];
        var length = MOVE_TRAILS.length;

var _MOVE_TRAILS$_$random = MOVE_TRAILS[_.random(length - 1)];

var deltaX = _MOVE_TRAILS$_$random[0];
        var deltaY = _MOVE_TRAILS$_$random[1];

return [x + deltaX, y + deltaY];
    };

Electron.prototype.composeCoord = function composeCoord(coord) {
        return coord.join(',');
    };

Electron.prototype.hasVisited = function hasVisited(dest) {
        var key = this.composeCoord(dest);

return this.visited[key];
    };

Electron.prototype.setDest = function setDest(dest) {
        this.destination = dest;
        this.visited[this.composeCoord(dest)] = true;
    };

Electron.prototype.next = function next() {
        var speed = this.speed;
        var current = this.current;
        var destination = this.destination;

if (Math.abs(current[0] - destination[0]) <= speed / 2 && Math.abs(current[1] - destination[1]) <= speed / 2) {
            destination = this.randomPath();

var tryCnt = 1;

while (this.hasVisited(destination) && tryCnt < 10) {
                tryCnt++;
                destination = this.randomPath();
            }

this.setDest(destination);
        }

var deltaX = destination[0] - current[0];
        var deltaY = destination[1] - current[1];

if (deltaX) {
            current[0] += deltaX / Math.abs(deltaX) * speed;
        }

if (deltaY) {
            current[1] += deltaY / Math.abs(deltaY) * speed;
        }

return [].concat(this.current);
    };

Electron.prototype.paintNextTo = function paintNextTo() {
        var _ref5 = arguments.length <= 0 || arguments[0] === undefined ? new FullscreenCanvas() : arguments[0];

var context = _ref5.context;
        var radius = this.radius;
        var color = this.color;
        var shadowColor = this.shadowColor;

var _next = this.next();

var x = _next[0];
        var y = _next[1];

context.save();

context.fillStyle = color;
        context.shadowBlur = radius * 5;
        context.shadowColor = shadowColor;
        context.globalCompositeOperation = 'lighter';

context.beginPath();
        context.arc(x, y, radius, 0, Math.PI * 2);
        context.closePath();

context.fill();

context.restore();
    };

return Electron;
}();

var Cell = function() {
    function Cell() {
        var lineIdx = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
        var rowIndex = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];

var _ref6 = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];

var _ref6$electronCount = _ref6.electronCount;
        var electronCount = _ref6$electronCount === undefined ? _.random(2, END_POINTS_OFFSET.length - 1) : _ref6$electronCount;
        var _ref6$background = _ref6.background;
        var background = _ref6$background === undefined ? CELL_HIGHLIGHT : _ref6$background;
        var _ref6$electronOptions = _ref6.electronOptions;
        var electronOptions = _ref6$electronOptions === undefined ? {} : _ref6$electronOptions;

_classCallCheck(this, Cell);

this.background = background;
        this.electronCount = electronCount;
        this.electronOptions = electronOptions;
        this.startX = lineIdx * CELL_DISTANCE;
        this.startY = rowIndex * CELL_DISTANCE;
    }

Cell.prototype.pin = function pin() {
        var lifeTime = arguments.length <= 0 || arguments[0] === undefined ? -1 >>> 1 : arguments[0];

this.expireAt = Date.now() + lifeTime;

PINNED_CELLS.push(this);
    };

Cell.prototype.scheduleUpdate = function scheduleUpdate() {
        this.nextUpdate = Date.now() + _.random(300, 500);
    };

Cell.prototype.paintNextTo = function paintNextTo() {
        var _ref7 = arguments.length <= 0 || arguments[0] === undefined ? new FullscreenCanvas() : arguments[0];

var context = _ref7.context;
        var startX = this.startX;
        var startY = this.startY;
        var background = this.background;
        var nextUpdate = this.nextUpdate;

if (nextUpdate && Date.now() < nextUpdate) return;

this.scheduleUpdate();
        this.createElectrons();

context.save();

context.globalCompositeOperation = 'lighter';
        context.fillStyle = background;
        context.fillRect(startX, startY, CELL_SIZE, CELL_SIZE);

context.restore();
    };

Cell.prototype.popRandom = function popRandom() {
        var arr = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];

var ramIdx = _.random(arr.length - 1);

return arr.splice(ramIdx, 1)[0];
    };

Cell.prototype.createElectrons = function createElectrons() {
        var startX = this.startX;
        var startY = this.startY;
        var electronCount = this.electronCount;
        var electronOptions = this.electronOptions;

if (!electronCount) return;

var endpoints = [].concat(END_POINTS_OFFSET);

for (var i = 0; i < electronCount; i++) {
            var _popRandom = this.popRandom(endpoints);

var offsetX = _popRandom[0];
            var offsetY = _popRandom[1];

ACTIVE_ELECTRONS.push(new Electron(startX + offsetX, startY + offsetY, electronOptions));
        }
    };

return Cell;
}();

var mainLayer = new FullscreenCanvas();
var bgLayer = new FullscreenCanvas();

function iterateItemsIn(list) {
    var now = Date.now();

for (var i = 0, max = list.length; i < max; i++) {
        var item = list[i];

if (now >= item.expireAt) {
            list.splice(i, 1);
            i--;
            max--;
        } else {
            item.paintNextTo(mainLayer);
        }
    }
}

function drawMain() {
    iterateItemsIn(PINNED_CELLS);
    iterateItemsIn(ACTIVE_ELECTRONS);
}

function drawGrid() {
    var ctx = arguments.length <= 0 || arguments[0] === undefined ? bgLayer.context : arguments[0];

var _ref8 = arguments.length <= 1 || arguments[1] === undefined ? bgLayer : arguments[1];

var width = _ref8.width;
    var height = _ref8.height;

ctx.fillStyle = BG_COLOR;
    ctx.fillRect(0, 0, width, height);

ctx.fillStyle = BORDER_COLOR;

// horizontal lines
    for (var h = CELL_SIZE; h < height; h += CELL_DISTANCE) {
        ctx.fillRect(0, h, width, BORDER_WIDTH);
    }

// vertical lines
    for (var w = CELL_SIZE; w < width; w += CELL_DISTANCE) {
        ctx.fillRect(w, 0, BORDER_WIDTH, height);
    }
}

function randomCell(options) {
    var width = mainLayer.width;
    var height = mainLayer.height;

var cell = new Cell(_.random(width / CELL_DISTANCE), _.random(height / CELL_DISTANCE), options);

cell.paintNextTo(mainLayer);
}

bgLayer.paint(drawGrid);
bgLayer.onResize(drawGrid);

mainLayer.paint(drawMain);
mainLayer.onResize(drawMain);

bgLayer.renderIntoView(0);
mainLayer.renderIntoView(1);

function loop() {
    mainLayer.composeBackground(bgLayer.canvas);

drawMain();

requestAnimationFrame(loop);
}

loop();

setInterval(randomCell, 1024 / Math.floor(Math.sqrt(mainLayer.width * mainLayer.height)) * 500);

var clickCount = 0;

var resetClickCount = _.debounce(function() {
    clickCount = 0;
}, 300);

function renderPointer(_ref9) {
    var clientX = _ref9.clientX;
    var clientY = _ref9.clientY;

if (++clickCount === 10) {
        clickCount = 0;
        mainLayer.clear();
    } else {
        resetClickCount();
    }

var cell = new Cell(Math.floor(clientX / CELL_DISTANCE), Math.floor(clientY / CELL_DISTANCE), {
        electronCount: 4,
        background: '#ff5353',
        electronOptions: {
            speed: 2,
            lifeTime: 1500,
            color: '#ff5353'
        }
    });

cell.paintNextTo(mainLayer);
}

['click', 'touchstart'].forEach(function(evt) {
    document.addEventListener(evt, function(evt) {
        if (evt.touches) {
            Array.from(evt.touches).forEach(renderPointer);
        } else {
            renderPointer(evt);
        }
    });
});

// shape builder

var shape = {
    lastText: '',
    lastMatrix: null,
    appendQueueID: undefined,
    layer: new FullscreenCanvas(true),

init: function init() {
        var _this = this;

this.layer.onResize(function() {
            if (_this.lastText) {
                _this.print(_this.lastText);
            }
        });
    },
    getTextMatrix: function getTextMatrix(text) {
        var _ref10 = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];

var _ref10$fontWeight = _ref10.fontWeight;
        var fontWeight = _ref10$fontWeight === undefined ? 'bold' : _ref10$fontWeight;
        var _ref10$fontFamily = _ref10.fontFamily;
        var fontFamily = _ref10$fontFamily === undefined ? FONT_FAMILY : _ref10$fontFamily;
        var layer = this.layer;
        var width = layer.width;
        var height = layer.height;

layer.repaint(function(ctx) {

ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = fontWeight + ' ' + MAX_FONT_SIZE + 'px ' + fontFamily;

var scale = width / ctx.measureText(text).width;
            var fontSize = Math.min(MAX_FONT_SIZE, MAX_FONT_SIZE * scale * 0.8);

ctx.font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;

ctx.fillText(text, width / 2, height / 2);
        });

var pixels = layer.context.getImageData(0, 0, width, height).data;
        var matrix = [];

for (var y = 0; y < height; y += CELL_DISTANCE) {
            for (var x = 0; x < width; x += CELL_DISTANCE) {
                var alpha = pixels[(x + y * width) * 4 + 3];

if (alpha > 0) matrix.push([x, y]);
            }
        }

return matrix;
    },
    print: function print(text, options) {
        var _this2 = this;

this.clear();

this.lastText = text;

var matrix = this.lastMatrix = _.shuffle(this.getTextMatrix(text, options));

var i = 0,
            max = matrix.length;

var markedCount = 0;

var append = function append() {
            var count = _.random(Math.floor(max / 20), Math.floor(max / 10));

var j = 0;

while (j < count && i < max) {
                var _matrix$i = matrix[i];
                var x = _matrix$i[0];
                var y = _matrix$i[1];

var isMarked = markedCount < MAX_MARKED_COUNT;

var cell = new Cell(Math.floor(x / CELL_DISTANCE), Math.floor(y / CELL_DISTANCE), {
                    // electronCount: 1, // ff low pref
                    electronCount: isMarked ? 4 : 0,
                    background: '#ff5353',
                    electronOptions: {
                        speed: 2,
                        lifeTime: isMarked ? 1000 : 100,
                        color: '#ff5353'
                    }
                });

cell.paintNextTo(mainLayer);
                cell.pin();

markedCount++;
                i++;
                j++;
            }

_this2.appendQueueID = setTimeout(append, _.random(50, 100));
        };

append();
    },
    explosion: function explosion() {
        var lastMatrix = this.lastMatrix;

var options = {
            electronCount: 4,
            background: '#ff5353',
            electronOptions: {
                speed: 2,
                lifeTime: 1000,
                color: '#ff5353'
            }
        };

if (lastMatrix) {
            var max = _.random(Math.floor(lastMatrix.length / 20), Math.floor(lastMatrix.length / 10));

max = Math.max(20, Math.min(100, max));

for (var i = 0; i < max; i++) {
                var _lastMatrix$i = lastMatrix[i];
                var x = _lastMatrix$i[0];
                var y = _lastMatrix$i[1];

var cell = new Cell(Math.floor(x / CELL_DISTANCE), Math.floor(y / CELL_DISTANCE), options);

cell.paintNextTo(mainLayer);
            }
        } else {
            var max = _.random(10, 20);

for (var i = 0; i < max; i++) {
                randomCell(options);
            }
        }
    },
    clear: function clear() {
        this.explosion();

clearTimeout(this.appendQueueID);

this.appendQueueID = undefined;
        this.lastMatrix = null;
        this.lastText = '';
        PINNED_CELLS.length = 0;
    }
};

shape.init();
shape.print('BBAE');

document.getElementById('input').addEventListener('keypress', function(_ref11) {
    var keyCode = _ref11.keyCode;
    var target = _ref11.target;

if (keyCode === 13) {
        var value = target.value.trim();

if (value === '#clear') {
            mainLayer.clear();
        }

if (value) {
            shape.print(value);
        } else {
            shape.clear();
        }

target.value = '';
    }
});

编译

CSS

HTML

包括背景电流图和文本电流化动画，可自定义标题文本。鼠标点击能触发电流波。 2016年度作品候选（canvas）。

canvas, 文本特效

编辑器支持Emmet

快捷键

包括背景电流图和文本电流化动画，可自定义标题文本。鼠标点击能触发电流波。 2016年度作品候选（canvas）。

canvas, 文本特效

HTML5 Underscore.js 可以定制的粒子化文本组装特效

使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：