Leon Sans

[ChungZH]

项目推荐

• 项目地址：https://github.com/cmiscm/leonsans

• 类别：JS

• 项目后续更新计划：

• 项目描述：这是一个用 JS 编写的 Sans Serif 半衬线字体。Leon Sans 允许动态更改字体粗细并在 HTML 5 的 Canvas 元素中创建自定义动画、效果或形状。想看看 Leon Sans 的效果？可以来看看 这里 和 这里 PS：这个字体是作者来庆祝他刚出生的婴儿 Leon 的哦~

• 推荐理由：好看、好用

• 示例代码：

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

• 截图：

提示

点击上方 “Preview” 更方便地阅读以下内容，

意见和反馈 BUG 请移步，反馈意见收集贴。新建 issues 只接受项目推荐，如不是则会被 bot 关闭。

提高项目收录的概率方法如下：

1. 到 HelloGitHub 网站首页：https://hellogithub.com 搜索要推荐的项目地址，查看准备推荐的项目是否被推荐过。

2. 根据 项目审核标准说明 修改项目

3. 如您推荐的项目收录到《HelloGitHub》月刊，您的 GitHub 帐号将展示在 贡献人列表，同时会在本 issues 中通知您。

再次感谢您对 HelloGitHub 项目的支持！