79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
|
(function (root, factory) {
|
||
|
|
if (typeof module !== 'undefined' && module.exports) module.exports = factory();
|
||
|
|
else root.blockLetterFX = factory();
|
||
|
|
})(typeof self !== 'undefined' ? self : this, function () {
|
||
|
|
|
||
|
|
var DEFAULT_OPTS = {
|
||
|
|
faceColor: '#f0f0f0',
|
||
|
|
midColor: '#cc2200',
|
||
|
|
deepColor: '#111111',
|
||
|
|
depthPct: 0.09,
|
||
|
|
spacing: 2,
|
||
|
|
padding: 28,
|
||
|
|
};
|
||
|
|
|
||
|
|
function draw(canvas, text, opts) {
|
||
|
|
opts = Object.assign({}, DEFAULT_OPTS, opts || {});
|
||
|
|
text = (text || '').trim() || 'BLOCK LETTER FX';
|
||
|
|
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
var DPR = window.devicePixelRatio || 1;
|
||
|
|
var LETTER_SPACING = opts.spacing;
|
||
|
|
var maxW = canvas.parentElement
|
||
|
|
? canvas.parentElement.clientWidth - opts.padding * 2
|
||
|
|
: 600;
|
||
|
|
|
||
|
|
var fontSize = Math.round(maxW * 0.11);
|
||
|
|
ctx.font = 'normal ' + fontSize + 'px "Bebas Neue", Impact, sans-serif';
|
||
|
|
var textW = ctx.measureText(text).width + LETTER_SPACING * text.length;
|
||
|
|
while (textW > maxW && fontSize > 8) {
|
||
|
|
fontSize--;
|
||
|
|
ctx.font = 'normal ' + fontSize + 'px "Bebas Neue", Impact, sans-serif';
|
||
|
|
textW = ctx.measureText(text).width + LETTER_SPACING * text.length;
|
||
|
|
}
|
||
|
|
|
||
|
|
var depth = Math.round(fontSize * opts.depthPct);
|
||
|
|
var padY = Math.round(fontSize * 0.2);
|
||
|
|
var cssW = textW + opts.padding * 2;
|
||
|
|
var cssH = fontSize + padY * 2 + depth;
|
||
|
|
|
||
|
|
canvas.width = Math.round(cssW * DPR);
|
||
|
|
canvas.height = Math.round(cssH * DPR);
|
||
|
|
canvas.style.width = cssW + 'px';
|
||
|
|
canvas.style.height = cssH + 'px';
|
||
|
|
|
||
|
|
ctx.scale(DPR, DPR);
|
||
|
|
ctx.clearRect(0, 0, cssW, cssH);
|
||
|
|
ctx.font = 'normal ' + fontSize + 'px "Bebas Neue", Impact, sans-serif';
|
||
|
|
ctx.textBaseline = 'top';
|
||
|
|
ctx.letterSpacing = LETTER_SPACING + 'px';
|
||
|
|
|
||
|
|
var x = opts.padding;
|
||
|
|
var y = padY;
|
||
|
|
|
||
|
|
for (var i = depth; i >= 1; i--) {
|
||
|
|
ctx.fillStyle = opts.deepColor;
|
||
|
|
ctx.fillText(text, x + i, y + i);
|
||
|
|
}
|
||
|
|
for (var i = Math.round(depth * 0.55); i >= 1; i--) {
|
||
|
|
ctx.fillStyle = opts.midColor;
|
||
|
|
ctx.fillText(text, x + i, y + i);
|
||
|
|
}
|
||
|
|
ctx.fillStyle = opts.faceColor;
|
||
|
|
ctx.fillText(text, x, y);
|
||
|
|
}
|
||
|
|
|
||
|
|
function blockLetterFX(canvas, text, opts) {
|
||
|
|
function render() { draw(canvas, text, opts); }
|
||
|
|
if (document.fonts && document.fonts.load) {
|
||
|
|
document.fonts.load('1em "Bebas Neue"').then(render);
|
||
|
|
} else {
|
||
|
|
setTimeout(render, 400);
|
||
|
|
}
|
||
|
|
window.addEventListener('resize', render);
|
||
|
|
return { redraw: render };
|
||
|
|
}
|
||
|
|
|
||
|
|
return blockLetterFX;
|
||
|
|
});
|