H5自定义字体、动画 | GitHub开源框架LenSans

LeonSans是可以自定义字体

Leon Sans框架是由Jongmin Kim于2019年编写。它允许动态更改字体粗细、间距、波浪、颜色等效果，并在HTML5的Canvas元素中创建自定义动画，效果或形状。他设计了字体来庆祝他刚出生的宝贝。

先看看效果图：

项目热度

标星： 2143（只是好玩）

拷贝： 45

贡献人数： 2

最后更新： 2019-09-01

代码提交活跃度：

推荐指数：【2】颗星

开发语言

开发语言：Js

使用方法

1、下载并引用Js

2、通过Canvas元素绘制

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();

};

3、对于要绘制动画要引入另外js库

let i, total = leon.drawing.length;

for (i = 0; i < total; i++) {

TweenMax.fromTo(leon.drawing[i], 1.6, {

value: 0

}, {

delay: i * 0.05,

value: 1,

ease: Power4.easeOut

});

}

项目地址

https://github.com/cmiscm/leonsans