Leon Sans特效字体

Leon Sans 是一种几何无衬线字体，表面看去平平无奇，但最特别的地方在于，字体是由代码构成的。有了这些代码，它可以随意变身。它允许动态更改字体粗细，并在 HTML 5 的画布元素中创建自定义动画、效果或形状。

动态更改粗细：

五彩缤纷（给炫彩的艺术字调粗细）：

妙笔生花：

字如雨下：

字体抖动：

线上 Demo 的功能一共十几种。文本由代码表示：text，字体大小有代码表示：size，粗细有代码：weight，字间距有代码表示：tracking......

另外，每一种特效都有各自的代码，也都有可以调节的参数。比如，瑟瑟发抖叫做 wave，抖动频率用 fps 来调。

只要用这一串代码，就可以把灵动的字体，在 H5 上显示了：

let leon, canvas, ctx;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leon = new LeonSans({
        text: 'The quick brown\nfox jumps over\nthe lazy dog',
        color: ['#000000'],
        size: 80,
        weight: 200
    });

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

如果想把生成过程的动画也显示出来，就加一行：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>