LeoSas 是一种几何无衬线字体，表面看去平平无奇，但最特别的地方在于，字体是由代码构成的。有了这些代码，它可以随意变身。它允许动态更改字体粗细，并在HTML5的画布元素中创建自定义动画、效果或形状。
动态更改粗细：
五彩缤纷（给炫彩的艺术字调粗细）：
妙笔生花：
字如雨下：
字体抖动：
线上 Demo 的功能一共十几种。文本由代码表示：text，字体大小有代码表示：size，粗细有代码：weight，字间距有代码表示：trackig......
另外，每一种特效都有各自的代码，也都有可以调节的参数。比如，瑟瑟发抖叫做wave，抖动频率用fps来调。
只要用这一串代码，就可以把灵动的字体，在H5上显示了：
letleo,cavas,ctx;costsw=800;costsh=600;costpixelRatio=2;fuctioiit(){cavas=documet.createElemet('cavas');documet.body.appedChild(cavas);ctx=cavas.getCotext("2d");cavas.width=sw*pixelRatio;cavas.height=sh*pixelRatio;cavas.style.width=sw+'px';cavas.style.height=sh+'px';ctx.scale(pixelRatio,pixelRatio);leo=ewLeoSas({text:'Thequickbrow\foxjumpsover\thelazydog',color:['#000000'],size:80,weight:200});requestAimatioFrame(aimate);}fuctioaimate(t){requestAimatioFrame(aimate);ctx.clearRect(0,0,sw,sh);costx=(sw-leo.rect.w)/2;costy=(sh-leo.rect.h)/2;leo.positio(x,y);leo.draw(ctx);}widow.oload=()=>{iit();};如果想把生成过程的动画也显示出来，就加一行：
<scriptsrc="https://cdjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweeMax.mi.js"></script>
评论