您好,欢迎进入leyu乐鱼体育官网leyu乐鱼体育官网电动伸缩门有限公司官网!
leyu乐鱼体育官网-首页

联系我们

邮箱:admin@hkqqy.com
电话:0661-44117213
地址:福建省泉州市富平县发时大楼3215号 在线咨询

leyu乐鱼体育官网常见问题

【leyu乐鱼体育官网】GitHub标星6200:一种字体,酿成千姿百态艺术字,可着花可下雨

发布日期:2021-11-25 00:04浏览次数:
本文摘要:栗体 发自 凹非寺量子位 报道 | 民众号 QbitAI这个字体叫Leon Sans,外貌看去平平无奇。但事实上,它并不是普通的字体,体内蕴藏着魔力。Leon Sans最特此外地方在于,字体是由代码组成的。 有了这些代码,它可以随意变身。好比,在暗夜里闪耀出七色的光影:好比,在春天里枝繁叶茂,花也开好了:好比,雨点打在地上汇成了河:形状 (Shapes) 、效果 (Effects) 、动画 (Animations) ,特技丰盛任君选择。

leyu乐鱼体育官网

栗体 发自 凹非寺量子位 报道 | 民众号 QbitAI这个字体叫Leon Sans,外貌看去平平无奇。但事实上,它并不是普通的字体,体内蕴藏着魔力。Leon Sans最特此外地方在于,字体是由代码组成的。

有了这些代码,它可以随意变身。好比,在暗夜里闪耀出七色的光影:好比,在春天里枝繁叶茂,花也开好了:好比,雨点打在地上汇成了河:形状 (Shapes) 、效果 (Effects) 、动画 (Animations) ,特技丰盛任君选择。

邪术字体,是名叫Jongmin Kim的韩国小同伴,为了庆祝宝宝降生而设计的。不外,这不是独乐乐,是普天同庆:代码开源了,GitHub已经有6200星。除此之外,有线上Demo可以玩耍。

都能怎么玩最基本的操作,就是改变粗细 (Weight)。不止给尺度字体调粗细,也给炫彩的艺术字调粗细:然后,加大一点难度,让字体瑟瑟发抖。就是把线条变得曲折。

稍稍不平整,就会轻微的发抖。猛烈的弯折,就是触电了,烧糊了:拔电,再也不动了。不外还好,可以顺手把它埋在春天里 (误) :固然,埋法不止这一种。

也可以把字母截断,酿成粉红色的“多米诺骨牌”,每张牌的宽窄还能自由选择:还可以让文字看上去,在平静中流淌:线上Demo的功效一共十几种,大家也可以自己试一下:如果,Demo还不能满足你的想象,那就去食用代码吧:字体是代码组成的文本有代码表现:text,字体巨细有代码表现:size,粗细有代码:weight,字间距有代码表现:tracking……另外,每一种特技都有各自的代码,也都有可以调治的参数。好比,瑟瑟发抖叫做wave,发抖频率用fps来调。

leyu乐鱼体育官网

只要用这一串代码,就可以把灵动的字体,在H5上显示了: 1let leon, canvas, ctx; 2 3const sw = 800; 4const sh = 600; 5const pixelRatio = 2; 6 7function init() { 8 canvas = document.createElement('canvas'); 9 document.body.appendChild(canvas);10 ctx = canvas.getContext("2d");1112 canvas.width = sw * pixelRatio;13 canvas.height = sh * pixelRatio;14 canvas.style.width = sw + 'px';15 canvas.style.height = sh + 'px';16 ctx.scale(pixelRatio, pixelRatio);1718 leon = new LeonSans({19 text: 'The quick brownnfox jumps overnthe lazy dog',20 color: ['#000000'],21 size: 80,22 weight: 20023 });2425 requestAnimationFrame(animate);26}2728function animate(t) {29 requestAnimationFrame(animate);3031 ctx.clearRect(0, 0, sw, sh);3233 const x = (sw - leon.rect.w) / 2;34 const y = (sh - leon.rect.h) / 2;35 leon.position(x, y);3637 leon.draw(ctx);38}3940window.onload = () => {41 init();42};如果想把生成历程的动画也显示出来,就加一行:1<script src="/uploads/allimg/211125/0004431134-2.jpg"></script>GitHub项目页有个完整列表,种种功效的设置方法都能查到。说不定,排列组合会有惊喜呢。大家也去玩一波吧。

GitHub传送门:https://github.com/cmiscm/leonsans官网传送门:https://leon-kim.com/— 完 —诚挚招聘量子位正在招募编辑/记者,事情所在在北京中关村。期待有才气、有热情的同学加入我们!相关细节,请在量子位民众号(QbitAI)对话界面,回复“招聘”两个字。

量子位 QbitAI · 头条号签约作者վ'ᴗ' ի 追踪AI技术和产物新动态。


本文关键词:【,leyu,乐鱼,体育,官网,】,GitHub,标星,6200,一种,leyu乐鱼体育官网

本文来源:leyu乐鱼体育官网-www.hkqqy.com

Copyright © 2009-2021 www.hkqqy.com. leyu乐鱼体育官网科技 版权所有 ICP备72006844号-3 XML地图 织梦模板