Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >一个非常骚气的字体

一个非常骚气的字体

作者头像
100001509164
发布于 2022-11-11 09:28:25
发布于 2022-11-11 09:28:25
385517
代码可运行
举报
文章被收录于专栏:DevTipsDevTips
运行总次数:17
代码可运行

介绍

Leon Sans 字体是 Jongmin Kim 创作的字体,它区别普通字体,神奇之处在于字体是用代码制作的,它有每个字形的绘图点的坐标值。使用坐标值,可以创建自定义形状、效果或动画,并支持调节字体大小(Size)、粗细(Weight)、字间距(Tracking)等常用属性。

演示示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://leon-kim.com/examples/

官方网站:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://leon-kim.com/

动画示例

  • Drawing animation
  • Weight change
  • Wave
  • Metaball
  • Plant
  • Colorful
  • Color pattern

代码示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="js/leon.js"></script>
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();
};
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 DevTips 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
5 条评论
热度
最新
fontawesome图标您能加载出来么,为什么我放在页面没有效果呢
fontawesome图标您能加载出来么,为什么我放在页面没有效果呢
11点赞举报
对呀 我也是 我查找了很多地方 都没有得到答案求解答 !!!
对呀 我也是 我查找了很多地方 都没有得到答案求解答 !!!
回复回复点赞举报
请问用这种语法写出来的文档,如何导出Word文档呢,我试了下,导出Word文档,识别不了里面的语法
请问用这种语法写出来的文档,如何导出Word文档呢,我试了下,导出Word文档,识别不了里面的语法
22点赞举报
markdown 工具导出 pdf 或者渲染出来后截图吧
markdown 工具导出 pdf 或者渲染出来后截图吧
回复回复点赞举报
好吧,PDF是没问题的
好吧,PDF是没问题的
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
markdown绘图插件----mermaid简介
当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样。
流川疯
2019/01/18
4.8K1
使用AI配合Typora智能画图
本文由 小马哥 创作,采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名 最后编辑时间为: 2023/05/25 11:35
IT小马哥
2023/05/26
7660
使用AI配合Typora智能画图
【Mermaid】画图工具使用笔记
文章目录 Mermaid简介 Mermaid使用方法 1、流程图(graph) 2、时序图(sequenceDiagram) 3、状态图(stateDiagram) 4、类图 5、甘特图(gantt) 6、饼图(pie) 7、需求图 参考连接 Mermaid简介 Mermaid 允许使用文本和代码创建图表和可视化效果。它是一个基于 JavaScript 的图表绘制和图表工具,可呈现受 Markdown 启发的文本定义,以动态创建和修改图表。 Mermaid使用方法 1、流程图(graph) graph
宝耶需努力
2022/12/13
2.5K0
【Mermaid】画图工具使用笔记
十五分钟让你快速学习Markdown语法到精通排版实践
描述: Markdown 是一种轻量级标记语言于2004年推出,创始人为约翰·格鲁伯(John Gruber)。 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者HTML)文档。
全栈工程师修炼指南
2022/09/29
2.7K0
Typero+Mermaid
graph声明了一个新图形和图形布局的方向 TB - 从上到下 BT - 从下到上 RL - 从右到左 LR - 从左到右 TD - 与TB相同
酒楼
2023/12/20
3400
markdown 入门简明指南
在Markdown中,如果想将一段文字定义为标题,只需要在这段文字前面加上 #,再在 # 后加一个空格即可。还可增加二、三、四、五、六级标题,总共六级,只需要增加 # ,增加一个 # ,标题字号相应降低一级。如下:
演化计算与人工智能
2020/08/14
9680
markdown 入门简明指南
惊呆!原来 markdown 的画图功能如此强大!
Markdown 是一种轻量级标记语言,相比于 xml、html 等超文本标记语言,Markdown 的语法更简单,结构更清晰,更加易读易用。
用户3147702
2022/06/27
10.8K0
惊呆!原来 markdown 的画图功能如此强大!
Typora使用Mermaid绘制各种图
其他连线:需要将graph关键字改为flowchart,除了新增加的连线形式外,上面三种线的渲染效果也会不同
码客说
2023/06/04
2.5K0
Typora使用Mermaid绘制各种图
>>运维管理:Typora工具之画图
所有的代码都要放在 mermaid代码标签中才可以生效,当前使用的typora的版本为 版本0.9.9.36.2 (4901),如果不是当前版本,删除原来版本,升级到最新版本即可,如果只是单纯升级版本,可能会有些样式问题,这里建议删除干净原来的版本,再重新下载,即可。
艾特
2023/10/10
5140
>>运维管理:Typora工具之画图
使用 markdown 画流程图、时序图
在日常工作中,难免会画一些流程图、时序图。之前都是选择使用在线的画图网站,画完然后截图插入到文档。我个人用的比较多的主要是 腾讯文档 。
Mervyn
2021/12/08
3K0
使用 markdown 画流程图、时序图
DeepSeek & Mermaid:如何将文本直接转化为精美图表? -优雅草卓伊凡
DeepSeek(深度求索)的 代码解释和渲染能力 天然支持 Mermaid,你只需:
卓伊凡
2025/05/22
6490
Mermaid 时序图常用语法
Cellinlab
2023/10/09
9450
像写 Markdown 一样画流程图
今天推荐一个项目「mermaid」,一个基于 Javascript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
我的小碗汤
2023/03/19
6870
像写 Markdown 一样画流程图
AI生成图表化:深入探索Mermaid
在使用生成式AI时,只要你提出让AI帮你生成mermaid图,AI的生成就会出现丰富的图形!
码事漫谈
2024/12/20
4.1K0
AI生成图表化:深入探索Mermaid
Mermaid:Star 74.4K,Github上的宝藏项目,你敢相信Markdown也能画出各式各样的流程图,操作太丝滑啦!
嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法
小华同学ai
2025/01/16
5750
Mermaid:Star 74.4K,Github上的宝藏项目,你敢相信Markdown也能画出各式各样的流程图,操作太丝滑啦!
我用AI帮我生成了流程图、时序图(顺序图)、甘特图
AI思维导图工具是一种结合人工智能技术的在线软件,旨在帮助用户快速生成和编辑思维导图、流程图等图形结构。这些工具可以自动识别用户输入的文字或图片,并生成对应的图表,极大地简化了复杂逻辑的绘图过程。
AIGC新知
2024/10/08
2.3K0
我用AI帮我生成了流程图、时序图(顺序图)、甘特图
Markdown高级用法——mermaid
起初是写文章,其中有时序图流程图等一般是processOn或者draw.io画截图粘过去的,工作中又是腾讯文档,上面也能画图,但假如我笔记软件用语雀之类的又要把一张图反复粘贴,浪费内存,如果统一图床,又会有内外网权限问题,最终我找到了解决办法,谁说markdown只能写文档的,语法熟练以后比直接画图还快。
燃192
2024/01/17
1.5K0
Markdown高级用法——mermaid
mindoc制作思维导图
mindoc是基于editor.md的适合写技术文档的工具,我将它整合到engineercms里,我觉得它的重要性仅次于onlyoffice的在线协作,因为网络写作方面非常适合。
hotqin888
2022/09/08
6120
mindoc制作思维导图
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
如果您希望直接访问Vue3导入mermaid的代码,可以直接访问:三、Vue3中如何引入mermaid
watermelo37
2025/01/22
1.1K0
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
关于写作那些事之快速上手Mermaid流程图
本文主要介绍了如何快速上手 Mermaid 流程图,不用贴图上传也不用拖拉点拽绘制,基于源码实时渲染流程图,操作简单易上手,广泛被集成于主流编辑器,包括 markdown 写作环境.
雪之梦技术驿站
2020/05/07
3.7K0
关于写作那些事之快速上手Mermaid流程图
推荐阅读
相关推荐
markdown绘图插件----mermaid简介
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验